{% extends "cms/base.html" %}
{% block title %}Footer Links{% endblock %}
{% block page_title %}Footer Links{% endblock %}

{% block extra_head %}
<style>
  .search-inline { display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--cms-border);border-radius:7px;padding:.5rem 1.25rem;transition:all .15s; }
  .search-inline:focus-within { border-color:#033152; }
  .search-inline input { border:none;background:none;outline:none;font-size:.875rem;width:160px;color:var(--cms-text); }
  .col-badge { display:inline-flex;align-items:center;border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600; }
  .col-who    { background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);color:#16517b; }
  .col-products { background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);color:#16517b; }
  .col-services { background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);color:#16517b; }
  .col-subs   { background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);color:#16517b; }
</style>
{% 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> Footer Links {% if total %}<span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ total }})</span>{% endif %}</h2>
  <div style="display:flex;gap:.5rem">
    <a href="{% url 'cms_footer_link_add' %}" class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add Link</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 mb-3">
  <div style="font-size:.75rem;color:var(--cms-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem">Filter by Column</div>
  <div class="d-flex flex-wrap gap-2">
    <a href="{% url 'cms_footer_links' %}"
       style="display:flex;align-items:center;gap:.4rem;background:{% if not col_filter %}rgba(22,81,123,.2){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,{% if not col_filter %}.5{% else %}.2{% endif %});border-radius:8px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;color:var(--cms-text);">
      <span>All</span>
      <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent)">{{ total }}</span>
    </a>
    {% for col_key, col_label, col_count in columns %}
    <a href="?col={{ col_key }}"
       style="display:flex;align-items:center;gap:.4rem;background:{% if col_filter == col_key %}rgba(22,81,123,.2){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,{% if col_filter == col_key %}.5{% else %}.2{% endif %});border-radius:8px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;color:var(--cms-text);">
      <span>{{ col_label }}</span>
      <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent)">{{ col_count }}</span>
    </a>
    {% endfor %}
  </div>
</div>

<div class="cms-card">
  {% if links %}
  <table class="cms-table">
    <thead>
      <tr>
        <th style="width:28px"></th>
        <th style="width:36px">#</th>
        <th>Label</th>
        <th>URL</th>
        <th>Column</th>
        <th>Target</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="sortable-footer-links">
      {% for fl in links %}
      <tr data-id="{{ fl.pk }}" {% if not fl.is_active %}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 style="font-size:.88rem;font-weight:500">{{ fl.label }}</td>
        <td style="font-size:.78rem;color:var(--cms-muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ fl.url }}">{{ fl.url }}</td>
        <td><span class="col-badge col-who">{{ fl.get_column_display }}</span></td>
        <td>
          {% if fl.target == '_blank' %}
          <span style="font-size:.75rem;color:var(--cms-muted)"><i class="fa-solid fa-arrow-up-right-from-square" style="font-size:.65rem;margin-right:.25rem"></i>New tab</span>
          {% else %}
          <span style="font-size:.75rem;color:var(--cms-muted)"><i class="fa-solid fa-arrow-right" style="font-size:.65rem;margin-right:.25rem"></i>Same tab</span>
          {% endif %}
        </td>
        <td>
          {% if fl.is_active %}
          <span class="badge-resolved">Active</span>
          {% else %}
          <span class="badge-closed">Inactive</span>
          {% endif %}
        </td>
        <td style="white-space:nowrap">
          <a href="{% url 'cms_footer_link_toggle' fl.pk %}"
             class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#e0a72e;"
             title="{% if fl.is_active %}Hide{% else %}Show{% endif %}">
            <i class="fa-solid {% if fl.is_active %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
          </a>
          <a href="{% url 'cms_footer_link_edit' fl.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_footer_link_delete' fl.pk %}" style="display:inline" onsubmit="return confirm('Delete &quot;{{ fl.label }}&quot;?')">
            {% 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:2.5rem 0">
    No links yet. <a href="{% url 'cms_footer_link_add' %}">Add your first one.</a>
  </p>
  {% endif %}
</div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
const tbody = document.getElementById('sortable-footer-links');
if (tbody) {
    Sortable.create(tbody, {
        handle: '.drag-handle',
        animation: 150,
        onEnd: function () {
            const order = [...tbody.querySelectorAll('tr[data-id]')].map(r => r.dataset.id);
            fetch('{% url "cms_footer_links_sort" %}', {
                method: 'POST',
                headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}'},
                body: JSON.stringify({order})
            });
        }
    });
}
</script>
<style>
.drag-handle:active { cursor:grabbing; }
.sortable-chosen { background:#f0f4f8 !important; }
</style>
{% endblock %}