{% extends "cms/base.html" %}
{% block title %}Legal Pages{% endblock %}
{% block page_title %}Legal Pages{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2><a href="{% url 'cms_homepage' %}#footer-sections" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Homepage</a> <span style="color:var(--cms-muted);font-weight:400">/</span> Legal Pages <span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ pages|length }})</span></h2>
  <div style="display:flex;gap:.5rem">
    <a href="{% url 'cms_legal_page_add' %}" class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add Page</a>
    <a href="{% url 'cms_homepage' %}#footer-sections" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
  </div>
</div>

<div class="cms-card">
  <table class="cms-table" id="sort-tbody-wrap">
    <thead>
      <tr>
        <th style="width:28px"></th>
        <th style="width:36px">#</th>
        <th>Page</th>
        <th>Last Updated</th>
        <th>Status</th>
        <th style="white-space:nowrap">Actions</th>
      </tr>
    </thead>
    <tbody id="sort-tbody">
      {% for page in pages %}
      <tr data-id="{{ page.pk }}" {% if not page.is_visible %}style="opacity:.45"{% endif %}>
        <td class="drag-handle" style="cursor:grab;color:var(--cms-muted);text-align:center"><i class="fa-solid fa-grip-vertical"></i></td>
        <td style="color:var(--cms-muted);font-size:.78rem;font-weight:600">{{ forloop.counter }}</td>
        <td>
          <div style="display:flex;align-items:center;gap:.5rem">
            <i class="fa-solid fa-file-lines" style="color:#16517b;font-size:.9rem"></i>
            <span style="font-size:.88rem">{{ page.get_slug_display }}</span>
          </div>
        </td>
        <td style="color:var(--cms-muted);font-size:.8rem">{{ page.updated_at|date:"d M Y, H:i" }}</td>
        <td>
          {% if page.is_visible %}<span class="badge-resolved">Active</span>
          {% else %}<span class="badge-closed">Inactive</span>{% endif %}
        </td>
        <td style="white-space:nowrap">
          <a href="{% url 'cms_legal_page_toggle' page.pk %}"
             class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#e0a72e"
             title="{% if page.is_visible %}Hide{% else %}Show{% endif %}">
            <i class="fa-solid {% if page.is_visible %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
          </a>
          <a href="{% url 'cms_legal_page_edit' page.slug %}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem" title="Edit">
            <i class="fa-solid fa-pen"></i>
          </a>
          <form method="post" action="{% url 'cms_legal_page_delete' page.pk %}" style="display:inline"
                onsubmit="return confirm('Delete {{ page.title|escapejs }}? The page at /{{ page.slug|escapejs }}/ stops working.')">
            {% csrf_token %}
            <button type="submit" class="btn-cms-danger" style="padding:.3rem .7rem;font-size:.8rem" title="Delete">
              <i class="fa-solid fa-trash"></i>
            </button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}

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