{% extends "base.html" %}
{% block title %}Form Preview – Echo{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-4xl font-semibold">Form Preview</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-600 hover:text-blue-500">Back to Forms</a>
  </div>

  {% if not template %}
    <div class="bg-zinc border border-slate-200 rounded-lg p-4">
      <p class="text-sm text-slate-500">Form template not found.</p>
    </div>
  {% else %}
    <div class="bg-zinc border border-slate-200 rounded-lg p-6 shadow-sm">
      <div class="mb-4">
        <h2 class="text-lg text-white font-semibold text-slate-900">{{ template.name }}</h2>
        {% if template.description %}
          <p class="mt-1 text-sm text-slate-500">{{ template.description }}</p>
        {% endif %}
        <p class="mt-2 text-xs text-slate-400">
          Read-only preview .
        </p>
      </div>

      <form class="space-y-4">
        {% if fields and fields|length > 0 %}
          {% for f in fields %}
            <div class="space-y-1">
              <label class="block text-sm font-medium text-slate-700">
                {{ f.question_text }}
                {% if f.required %}
                  <span class="text-red-500">*</span>
                {% endif %}
              </label>
              {% set t = (f.type or 'text') %}

              {% if t == 'textarea' %}
                <textarea
                  class="mt-1 block w-full rounded-md border border-slate-300 bg-zinc text-slate-900 placeholder-slate-400 shadow-sm focus:outline-none"
                  rows="3"
                  disabled
                  placeholder="User answer here"
                ></textarea>

              {% elif t == 'number' %}
                <input
                  type="number"
                  class="mt-1 block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 shadow-sm focus:outline-none"
                  placeholder="123"
                  disabled
                />

              {% elif t == 'select' %}
                <select
                  class="mt-1 block w-full rounded-md border border-slate-300 bg-white text-slate-900 shadow-sm focus:outline-none"
                  disabled
                >
                  <option>Example option</option>
                </select>
                <p class="mt-1 text-xs text-slate-400">
                  Dropdown options are shown here when configured.
                </p>

              {% elif t == 'checkbox' %}
                <div class="mt-1 flex items-center gap-2">
                  <input
                    type="checkbox"
                    class="h-4 w-4 rounded border-slate-300 bg-white text-blue-600 focus:outline-none"
                    disabled
                  />
                  <span class="text-sm text-slate-600">Example checkbox</span>
                </div>

              {% elif t == 'radio' %}
                <div class="mt-1 space-y-1">
                  <label class="inline-flex items-center gap-2 text-sm text-slate-600">
                    <input
                      type="radio"
                      class="h-4 w-4 border-slate-300 bg-white text-blue-600 focus:outline-none"
                      disabled
                    />
                    <span>Option 1</span>
                  </label>
                  <label class="inline-flex items-center gap-2 text-sm text-slate-600">
                    <input
                      type="radio"
                      class="h-4 w-4 border-slate-300 bg-white text-blue-600 focus:outline-none"
                      disabled
                    />
                    <span>Option 2</span>
                  </label>
                </div>

              {% elif t == 'email' %}
                <input
                  type="email"
                  class="mt-1 block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 shadow-sm focus:outline-none"
                  placeholder="name@example.com"
                  disabled
                />

              {% else %}
                <input
                  type="text"
                  class="mt-1 block w-full rounded-md border border-slate-300 bg-white text-slate-900 placeholder-slate-400 shadow-sm focus:outline-none"
                  placeholder="User answer here"
                  disabled
                />
              {% endif %}

              {% if f.required %}
                <p class="mt-1 text-xs text-slate-400">This question is required.</p>
              {% endif %}
            </div>
          {% endfor %}
        {% else %}
          <p class="text-sm text-slate-500">No fields have been added to this form yet.</p>
        {% endif %}
      </form>
    </div>
  {% endif %}
</div>
{% endblock %}