{% extends "base.html" %}
{% block title %}Submission Forms Menu – Echo 1.1{% 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">Submission Form Menu</h1>
    </div>
    <a href="/dashboard/it_agent" class="text-sm text-blue-400 hover:text-blue-300">Back to Dashboard</a>
  </div>
  <div class="flex">
    <a href="/form_create" class="group block w-full md:w-64 h-40 rounded-xl border border-zinc-800 bg-zinc-900 hover:bg-zinc-800 hover:border-zinc-700 transition-colors">
      <div class="h-full flex flex-col items-center justify-center gap-3">
        <div class="flex items-center justify-center h-16 w-16 rounded-lg bg-zinc-800 text-zinc-200 group-hover:bg-zinc-700">
          <img src="/static/icons/form.svg" alt="Form Icon" class="h-8 w-8 invert brightness-0">
        </div>
        <div class="text-lg font-medium text-zinc-200">Create Form</div>
        <div class="text-m text-white-500">Start a new template</div>
      </div>
    </a>
  </div>

  <div class="space-y-3">
    <h2 class="text-2xl font-semibold">Existing Templates</h2>
    {% if templates and templates|length > 0 %}
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        {% for t in templates %}
          {% set st = (t.status.value if t.status else 'draft') %}
          {% set is_published = (st == 'published') %}
          <div class="group rounded-xl border border-zinc-800 bg-zinc-900 hover:bg-zinc-800 hover:border-zinc-700 transition-colors p-4 flex flex-col gap-3">
            <div class="flex items-center gap-4">
              <div class="flex items-center justify-center h-16 w-16 rounded-lg bg-zinc-800 text-zinc-200 group-hover:bg-zinc-700">
                <img src="/static/icons/form.svg" alt="Form Icon" class="h-8 w-8 invert brightness-0">
              </div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center gap-2">
                  <a href="/form_templates/{{ t.id }}" class=" text-lg font-medium text-zinc-100 hover:text-blue-300">
                    {{ t.name }}
                  </a>
                  <span class="inline-flex items-center rounded px-3 py-1 text-[15px] border border-zinc-700 text-zinc-400">
                    {{ st|capitalize }}
                  </span>
                </div>
                <div class="text-m text-white-500 mt-1">Updated {{ t.updated_at.strftime('%Y-%m-%d %H:%M') if t.updated_at else '—' }}</div>
              </div>
            </div>

            <div class="mt-1 flex flex-wrap gap-2 text-xs">
              <a href="/form_templates/{{ t.id }}"
                 class="px-3 py-1 rounded border border-zinc-700 text-zinc-200 hover:bg-zinc-800">
                Edit
              </a>
              <form method="post" action="/form_templates/{{ t.id }}/duplicate">
                <button type="submit"
                        class="px-3 py-1 rounded border border-zinc-700 text-zinc-200 hover:bg-zinc-800">
                  Duplicate
                </button>
              </form>
              <form method="post" action="/form_templates/{{ t.id }}/toggle_publish">
                <button type="submit"
                        class="px-3 py-1 rounded border border-zinc-700 text-zinc-200 hover:bg-zinc-800">
                  {{ 'Unpublish' if is_published else 'Publish' }}
                </button>
              </form>
              <form method="post" action="/form_templates/{{ t.id }}/delete" onsubmit="return confirm('Delete this template?');">
                <button type="submit"
                        class="px-3 py-1 rounded border border-red-600 text-red-300 hover:bg-red-950/50">
                  Delete
                </button>
              </form>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p class="text-m text-zinc-400">No templates yet. Click “Create Form” to add one.</p>
    {% endif %}
  </div>
</div>
{% endblock %}