{% extends "cms/base.html" %}
{% block title %}Why Boxes{% endblock %}
{% block page_title %}Why Choose Us — Feature Boxes{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2><a href="{% url 'cms_homepage' %}#content-sections" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Homepage</a> <span style="color:var(--cms-muted);font-weight:400">/</span> Why Choose Us Boxes</h2>
  <div style="display:flex;gap:.5rem">
    <a href="{% url 'cms_why_box_add' %}" class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add Box</a>
    <a href="{% url 'cms_homepage' %}#content-sections" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
  </div>
</div>
<div class="cms-card" style="padding:0;overflow:hidden">
  {% if boxes %}
  <table class="cms-table">
    <thead>
      <tr>
        <th style="width:32px"></th>
        <th>Title</th>
        <th>Body</th>
        <th style="width:80px">Status</th>
        <th style="width:100px">Actions</th>
      </tr>
    </thead>
    <tbody id="sort-tbody">
      {% for b in boxes %}
      <tr data-id="{{ b.pk }}">
        <td class="drag-handle"><i class="fa-solid fa-grip-vertical" style="color:var(--cms-muted)"></i></td>
        <td>
          {% if b.icon %}
            <img src="{{ b.icon.url }}" style="height:22px;width:22px;object-fit:contain;margin-right:.4rem;filter:brightness(0) saturate(100%) invert(12%) sepia(60%) saturate(700%) hue-rotate(180deg) brightness(85%) contrast(95%)">
          {% endif %}
          {{ b.title }}
        </td>
        <td style="color:var(--cms-muted);font-size:.82rem;max-width:300px">{{ b.body|truncatechars:80 }}</td>
        <td>
          {% if b.is_active %}
            <span class="badge-resolved">Active</span>
          {% else %}
            <span class="badge-closed">Off</span>
          {% endif %}
        </td>
        <td style="white-space:nowrap">
          <form method="post" action="{% url 'cms_why_box_toggle_visibility' b.pk %}" style="display:inline">
            {% csrf_token %}
            <button type="submit" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#e0a72e" title="Toggle visibility">
              <i class="fa-solid {% if b.is_active %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
            </button>
          </form>
          <a href="{% url 'cms_why_box_edit' b.pk %}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem"><i class="fa-solid fa-pen"></i></a>
          <form method="post" action="{% url 'cms_why_box_delete' b.pk %}" style="display:inline" onsubmit="return confirm('Delete this box?')">
            {% csrf_token %}
            <button type="submit" class="btn-cms-danger" style="padding:.3rem .7rem"><i class="fa-solid fa-trash"></i></button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p style="color:var(--cms-muted);text-align:center;padding:2rem 0">No boxes yet. <a href="{% url 'cms_why_box_add' %}">Add one.</a></p>
  {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>initDragSort('#sort-tbody','WhyChooseUsBox','{% url "cms_sort_items" %}','{{ csrf_token }}');</script>
{% endblock %}