{% extends "cms/base.html" %}
{% block title %}Hero Slides{% endblock %}
{% block page_title %}Hero Slides{% endblock %}

{% block extra_head %}
<style>
  .cms-table th:nth-child(2), .cms-table td:nth-child(2) { text-align: left; }
  .cms-table th:nth-child(3), .cms-table td:nth-child(3) { text-align: left; }
</style>
{% endblock %}

{% block cms_content %}

<div class="cms-section-header">
  <h2>Hero Slides <span style="font-size:.75em;font-weight:400;color:var(--cms-muted);">({{ total }} slide{{ total|pluralize }})</span></h2>
  <div class="d-flex align-items-center gap-2">
    <a href="{% url 'cms_slide_add' %}" class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add Slide</a>
  </div>
</div>

<div class="cms-card">
  {% if items %}
  <table class="cms-table">
    <thead>
      <tr>
        <th style="width:32px;"></th>
        <th style="width:110px;">Image</th>
        <th>Headline</th>
        <th>Buttons</th>
        <th style="width:90px;">Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="sort-tbody">
      {% for s in items %}
      <tr data-id="{{ s.pk }}" {% if not s.is_active %}style="opacity:.45;"{% endif %}>
        <td class="drag-handle"><i class="fa-solid fa-grip-vertical" style="color:#cbd5e1;"></i></td>
        <td>
          {% if s.image %}
            <img src="{{ s.image.url }}" style="height:44px;width:88px;object-fit:cover;border-radius:5px;">
          {% else %}
            <span style="font-size:.75rem;color:var(--cms-muted);">No image</span>
          {% endif %}
        </td>
        <td>
          {% if s.label %}<div style="font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--cms-muted);">{{ s.label }}</div>{% endif %}
          <div style="font-weight:500;">{{ s.headline|default:"Untitled" }}{% if s.headline_em %} <em style="color:var(--cms-muted)">{{ s.headline_em }}</em>{% endif %}</div>
        </td>
        <td style="font-size:.8rem;color:var(--cms-muted);">
          {% if s.btn1_text %}{{ s.btn1_text }}{% endif %}{% if s.btn2_text %}, {{ s.btn2_text }}{% endif %}
          {% if not s.btn1_text and not s.btn2_text %}-{% endif %}
        </td>
        <td>{% if s.is_active %}<span class="badge-resolved">Active</span>{% else %}<span class="badge-closed">Hidden</span>{% endif %}</td>
        <td>
          <form method="post" action="{% url 'cms_slide_toggle_visibility' s.pk %}" style="display:inline;">
            {% csrf_token %}
            <button type="submit" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#e0a72e;"
                    title="{% if s.is_active %}Hide{% else %}Show{% endif %}">
              <i class="fa-solid {% if s.is_active %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
            </button>
          </form>
          <a href="{% url 'cms_slide_edit' s.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_slide_delete' s.pk %}" style="display:inline;"
                onsubmit="return confirm('Delete this slide?')">
            {% 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 slides yet. <a href="{% url 'cms_slide_add' %}">Add one.</a>
  </p>
  {% endif %}
</div>
{% endblock %}

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