{% extends "admin/base.html" %}

{% block title %}FAQs | Admin{% endblock %}

{% block content %}
<p class="eyebrow-dark">Support content</p>
<h1 class="mt-3 text-4xl font-black tracking-normal">FAQs</h1>

<form class="mt-8 rounded-lg border border-zinc-200 bg-white p-6 shadow-sm" method="post">
  <div class="grid gap-5">
    {% for faq in faqs %}
      <div class="rounded-lg border border-zinc-200 p-4">
        <input type="hidden" name="faq_id" value="{{ faq.id }}">
        <div class="grid gap-4 md:grid-cols-[1fr_120px_90px]">
          <input class="form-input" name="question_en_{{ faq.id }}" value="{{ faq.question_en or '' }}" placeholder="Question">
          <input class="form-input" name="sort_order_{{ faq.id }}" value="{{ faq.sort_order }}">
          <label class="mt-3 text-sm font-bold"><input type="checkbox" name="is_active_{{ faq.id }}" {% if faq.is_active %}checked{% endif %}> Active</label>
        </div>
        <textarea class="form-input mt-4 min-h-24" name="answer_en_{{ faq.id }}" placeholder="Answer">{{ faq.answer_en or '' }}</textarea>
      </div>
    {% endfor %}
  </div>

  <h2 class="mt-8 text-xl font-black">Add FAQ</h2>
  <div class="mt-4 grid gap-4">
    <input class="form-input" name="new_question_en" placeholder="Question">
    <textarea class="form-input min-h-24" name="new_answer_en" placeholder="Answer"></textarea>
    <input class="form-input max-w-xs" name="new_sort_order" value="100">
  </div>
  <button class="btn-primary mt-6" type="submit">Save FAQs</button>
</form>
{% endblock %}