{% extends "base.html" %}
{% block title %}Edit Form Template – Echo{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-4xl font-semibold">Edit Form Template</h1>
      {% if template %}
        <p class="text-m text-zinc-400">Template Name: <span class="font-mono text-zinc-300">{{ template.name }}</span></p>
      {% endif %}
    </div>
    <a href="/form_menu" class="text-m text-blue-400 hover:text-blue-300">Back to Menu</a>
  </div>

  {% if not template %}
    <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-4">
      <p class="text-sm text-zinc-400">Template not found.</p>
    </div>
  {% else %}

  <div class="bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden">
    <div class="px-4 py-3 border-b border-zinc-800 bg-zinc-950/40">
      <h2 class="text-2xl font-semibold text-zinc-200">Template Details</h2>
    </div>
    <form method="post" action="/form_templates/{{ template.id }}/update" class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
      <div>
        <label class="block text-xl font-medium text-zinc-300" for="name">Name</label>
        <input id="name" name="name" type="text" value="{{ template.name }}" required class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 text-lg placeholder-zinc-500 shadow-sm focus:border-blue-500 focus:ring-blue-500" />
      </div>
      <div>
        <label class="block text-xl font-medium text-zinc-300" for="status">Status</label>
        <select id="status" name="status" class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 text-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
          {% set st = (template.status.value if template.status else 'draft') %}
          <option value="draft" {{ 'selected' if st == 'draft' else '' }}>Draft</option>
          <option value="published" {{ 'selected' if st == 'published' else '' }}>Published</option>
          <option value="archived" {{ 'selected' if st == 'archived' else '' }}>Archived</option>
        </select>
      </div>
      <div class="md:col-span-3">
        <label class="block text-xl font-medium text-zinc-300" for="description">Description</label>
        <input id="description" name="description" type="text" value="{{ template.description or '' }}" placeholder="Optional description" class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 text-lg placeholder-zinc-500 shadow-sm focus:border-blue-500 focus:ring-blue-500" />
      </div>
    </form>
  </div>
  <div class="bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden">
    <div class="px-4 py-3 border-b border-zinc-800 bg-zinc-950/40">
      <div class="flex items-center justify-between">
        <div>
          <h2 class="text-2xl font-semibold text-zinc-200">Existing Fields</h2>
        </div>
        <button type="button" id="add-field-toggle" class="inline-flex items-center gap-2 rounded-md border border-zinc-700/80 bg-zinc-900 px-6 py-3 text-m text-zinc-200 hover:bg-zinc-800 hover:border-zinc-600 transition-colors">
          <span class="inline-flex h-4 w-4 items-center justify-center rounded bg-blue-600/10 text-blue-400">
            <img src="/static/icons/add.svg" alt="Add Field" class="h-3.5 w-3.5 invert brightness-0" />
          </span>
          <span id="add-field-label">Add Field</span>
        </button>
      </div>
    </div>
    <div class="p-4 space-y-4">
      <div id="add-field-panel" class="hidden overflow-hidden transition-all duration-300 ease-out">
        <form method="post" action="/form_templates/{{ template.id }}/fields" class="grid grid-cols-1 md:grid-cols-6 gap-3 items-end mb-4 bg-zinc-950/50 border border-zinc-800 rounded-lg p-4 shadow-sm">
          <div class="md:col-span-3">
            <label class="block text-lg font-medium text-zinc-300" for="af_question_text">Question label</label>
            <input id="af_question_text" name="question_text" type="text" required placeholder="Ask a question" class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 text-m placeholder-zinc-500 shadow-sm focus:border-blue-500 focus:ring-blue-500" />
          </div>
          <div class="md:col-span-1">
            <label class="block text-lg font-medium text-zinc-300" for="af_type">Answer type</label>
            <select id="af_type" name="type" class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 text-m shadow-sm focus:border-blue-500 focus:ring-blue-500">
              <option value="text">Short text (single line)</option>
              <option value="textarea">Long text (multi-line)</option>
              <option value="number">Number</option>
              <option value="select">Dropdown (single choice)</option>
              <option value="checkbox">Checkbox (yes / no)</option>
              <option value="radio">Radio buttons (single choice)</option>
              <option value="email">Email address</option>
            </select>
          </div>
          <div class="mt-6 md:col-span-1">
            <input type="hidden" name="required" value="true" />
            <div class="flex items-center gap-2">
              <input id="af_required" type="checkbox" name="required" value="true" class="h-4 w-4 rounded border-zinc-700 bg-zinc-900 text-blue-600 focus:ring-blue-500" />
              <label for="af_required" class="text-m text-zinc-300">Required</label>
            </div>
          </div>
          <div class="md:col-span-1 flex gap-2 md:justify-end mt-6 md:mt-0">
            <button type="button" id="cancel-add-field" class="inline-flex items-center rounded-md border border-zinc-800 px-3 py-2 text-sm text-zinc-300 hover:bg-zinc-800">Cancel</button>
            <button type="submit" id="save-field-btn" class="inline-flex items-center rounded-md bg-blue-600 px-5 py-2 text-sm text-white hover:bg-blue-700">Add Field</button>
          </div>
        </form>
      </div>
        <div class="overflow-x-auto">
        {% if fields and fields|length > 0 %}
            <table class="min-w-full">
                <thead class="text-zinc-400 text-lg ">
                    <tr>
                    <th class="text-left py-2 pr-4">Position</th>
                    <th class="text-left py-2 pr-4">Question</th>
                    <th class="text-left py-2 pr-4">Type</th>
                    <th class="text-left py-2 pr-4">Required</th>
                    <th class="text-left py-2 pr-4">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-800 text-m">
                    
                    {% for f in fields %}
                        <tr>
                            <td class="py-2 pr-4">{{ f.position or loop.index0 }}</td>
                            <td class="py-2 pr-4 font-mono text-xs">{{ f.question_text }}</td>
                            <td class="py-2 pr-4">{{ f.type }}</td>
                            <td class="py-2 pr-4">{{ 'Yes' if f.required else 'No' }}</td>
                            <td class="py-2 pr-4 space-x-3">
                                <a href="/form_fields/{{ f.id }}/edit" class="inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-lg text-white hover:bg-blue-700">Edit</a>
                                <a href="/form_fields/{{ f.id }}/delete" class="inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-lg text-white hover:bg-red-700"">Delete</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
          <div class="flex items-center justify-center py-10">
            <div class="text-center max-w-sm">
              <div class="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-lg bg-zinc-800">
                <img src="/static/icons/form.svg" alt="Form" class="h-8 w-8 invert brightness-0" />
              </div>
              <h3 class="text-lg font-medium text-zinc-200">No fields yet</h3>
              <p class="mt-1 text-lg text-zinc-400">Add fields to build this form.</p>
            </div>
          </div>
        {% endif %}  
    </div>
   </div>
  {% endif %}
</div>
<div class="md:col-span-3 flex gap-3 md:justify-end">
  <a href="/form_menu" class="inline-flex items-center rounded-md border border-zinc-800 px-3 py-2 text-lg text-zinc-300 hover:bg-zinc-800">Cancel</a>
  <a href="/form_templates/{{template.id}}/preview" class="inline-flex items-center rounded-md bg-green-600 px-3 py-2 text-lg text-white hover:bg-green-700">Preview</a>
  <button type="submit" class="inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-lg text-white hover:bg-blue-700">Save Changes</button>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/form_edit.js"></script>
{% endblock %}