{% extends 'base.html' %}

{% block title %}Rejection Reasons{% endblock %}

{% block content %}
<section class="content-section editorial-dashboard">
  <div class="surface-card dashboard-panel editorial-panel">
    <div class="editorial-panel__head">
      <div class="editorial-panel__title-wrap">
        <h1 class="editorial-panel__title">Rejection Reasons</h1>
      </div>
    </div>

    <div class="row g-4">
      <div class="col-xl-4">
        <div class="surface-card verification-form-card h-100">
          <div class="verification-form-card__header verification-form-card__header--editorial">
            <div>
              <h2 class="h5 fw-semibold mb-0">{% if editing_option %}Edit Reason{% else %}Add Reason{% endif %}</h2>
            </div>
          </div>

          <form method="post" novalidate class="row g-3">
            {% csrf_token %}
            {% if editing_option %}
              <input type="hidden" name="option_id" value="{{ editing_option.pk }}">
            {% endif %}
            <div class="col-12">
              <label class="form-label" for="{{ form.label.id_for_label }}">{{ form.label.label }}</label>
              {{ form.label }}
              {% if form.label.errors %}<div class="invalid-feedback d-block">{{ form.label.errors|join:', ' }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label" for="{{ form.sort_order.id_for_label }}">{{ form.sort_order.label }}</label>
              {{ form.sort_order }}
              {% if form.sort_order.errors %}<div class="invalid-feedback d-block">{{ form.sort_order.errors|join:', ' }}</div>{% endif %}
            </div>
            <div class="col-md-6 d-flex align-items-end">
              <div class="form-check">
                {{ form.is_active }}
                <label class="form-check-label" for="{{ form.is_active.id_for_label }}">{{ form.is_active.label }}</label>
              </div>
            </div>
            <div class="col-12 d-flex justify-content-end gap-2">
              {% if editing_option %}
                <a href="{% url 'verification:description_reason_settings' %}" class="btn btn-outline-secondary">Cancel</a>
              {% endif %}
              <button type="submit" class="btn btn-brand">Save</button>
            </div>
          </form>
        </div>
      </div>

      <div class="col-xl-8">
        <div class="surface-card dashboard-panel editorial-panel h-100">
          <div class="editorial-panel__head">
            <div class="editorial-panel__title-wrap">
              <h2 class="editorial-panel__title">Configured Reasons</h2>
              <span class="editorial-panel__count">{{ options|length }}</span>
            </div>
          </div>

          <div class="table-responsive superuser-overview-table-wrap">
            <table class="table align-middle superuser-overview-table mb-0">
              <thead>
                <tr>
                  <th>Reason</th>
                  <th>Order</th>
                  <th>Status</th>
                  <th class="text-end">Action</th>
                </tr>
              </thead>
              <tbody>
                {% for option in options %}
                  <tr>
                    <td class="superuser-overview-table__name">{{ option.label }}</td>
                    <td>{{ option.sort_order }}</td>
                    <td>
                      <span class="editorial-draft-pill">{% if option.is_active %}Active{% else %}Inactive{% endif %}</span>
                    </td>
                    <td class="text-end">
                      <div class="btn-group btn-group-sm" role="group" aria-label="Reason actions">
                        <a href="{% url 'verification:description_reason_settings' %}?edit={{ option.pk }}" class="btn btn-outline-secondary">Edit</a>
                        <form method="post" action="{% url 'verification:description_reason_settings' %}" class="d-inline">
                          {% csrf_token %}
                          <input type="hidden" name="settings_action" value="delete">
                          <input type="hidden" name="option_id" value="{{ option.pk }}">
                          <button type="submit" class="btn btn-outline-danger">Delete</button>
                        </form>
                      </div>
                    </td>
                  </tr>
                {% empty %}
                  <tr>
                    <td colspan="4" class="text-center text-muted py-4">No reasons configured yet.</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}