{% extends "cms/base.html" %}
{% block title %}Social Links{% endblock %}
{% block page_title %}Social Links{% 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> Social Links <span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ links|length }})</span></h2>
    <div style="display:flex;gap:.5rem">
        <a href="{% url 'cms_social_link_add' %}" class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add Social 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">
    <table class="cms-table" id="social-sort-table">
        <thead>
            <tr>
                <th style="width:36px"></th>
                <th>Platform</th>
                <th>URL</th>
                <th style="width:80px;">Status</th>
                <th style="width:56px;">Live</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="social-sort-tbody">
            {% for link in links %}
            <tr data-id="{{ link.pk }}" {% if not link.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>
                    <div style="display:flex;align-items:center;gap:.6rem">
                        <i class="{{ link.icon_class }}" style="font-size:1.1rem;color:#16517b;width:20px;text-align:center"></i>
                        <span style="font-weight:600;font-size:.88rem">{{ link.get_platform_display }}</span>
                    </div>
                </td>
                <td style="font-size:.82rem;color:var(--cms-muted);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                    {{ link.url }}
                </td>
                <td>
                    {% if link.is_active %}
                    <span class="badge-resolved">Active</span>
                    {% else %}
                    <span class="badge-closed">Inactive</span>
                    {% endif %}
                </td>
                <td>
                    <a href="{{ link.url }}" target="_blank" class="btn-cms-ghost" style="padding:.3rem .6rem;font-size:.8rem;" title="{{ link.url }}"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                </td>
                <td style="white-space:nowrap">
                    <a href="{% url 'cms_social_link_toggle_visibility' link.pk %}"
                       class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#e0a72e;"
                       title="{% if link.is_active %}Hide{% else %}Show{% endif %}">
                        <i class="fa-solid {% if link.is_active %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
                    </a>
                    <a href="{% url 'cms_social_link_edit' link.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_social_link_delete' link.pk %}" style="display:inline" onsubmit="return confirm('Delete this social link?')">
                        {% csrf_token %}
                        <button type="submit" class="btn-cms-danger" style="padding:.3rem .7rem"><i class="fa-solid fa-trash"></i></button>
                    </form>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" style="text-align:center;color:var(--cms-muted);padding:3rem">
                    No social links yet. <a href="{% url 'cms_social_link_add' %}" style="color:var(--cms-accent)">Add your first one.</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}

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