{% extends "modal_base.html" %}

{% block modal_class %}max-w-3xl{% endblock %}

{% block form_attributes %}
hx-patch="/update-image-prompt"
hx-target="#system_prompt_section"
hx-swap="outerHTML"
{% endblock %}

{% block modal_content %}
<h3 class="text-xl font-extrabold tracking-tight mb-2">Edit Image Processing Prompt</h3>

<div class="form-control">
  <textarea name="image_processing_prompt" class="nb-input h-96 w-full font-mono text-sm">{{
    settings.image_processing_prompt }}</textarea>
  <p class="text-xs opacity-70 mt-1">System prompt used for processing images</p>
</div>
{% endblock %}

{% block primary_actions %}
<button type="button" class="nb-btn w-full sm:w-auto sm:mr-2" id="reset_prompt_button">
  Reset to Default
</button>

<textarea id="default_prompt_content" style="display:none;">{{ default_image_prompt }}</textarea>
<script>
  document.getElementById('reset_prompt_button').addEventListener('click', function () {
    const defaultContent = document.getElementById('default_prompt_content').value;
    document.querySelector('textarea[name=image_processing_prompt]').value = defaultContent;
  });
</script>

<button type="submit" class="nb-btn nb-cta w-full sm:w-auto">
  <span class="htmx-indicator hidden">
    <span class="loading loading-spinner loading-xs mr-2"></span>
  </span>
  Save Changes
</button>
{% endblock %}