{% extends "management/base.html" %}
{% load i18n lucide ui %}

{% block panel_title %}{% trans "Sponsors" %}{% endblock panel_title %}
{% block heading %}{% trans "Sponsors" %}{% endblock heading %}

{% block topbar_context %}
    <span class="badge badge-neutral">{% blocktrans count counter=sponsors|length %}{{ counter }} sponsor{% plural %}{{ counter }} sponsors{% endblocktrans %}</span>
{% endblock topbar_context %}

{% block actions %}
    <a class="btn btn-primary gap-2" href="{% url 'management:sponsor_create' %}">{% lucide "plus" size=16 %} {% trans "New sponsor" %}</a>
{% endblock actions %}

{% block panel %}
    <div class="card overflow-hidden">
        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th>{% trans "Name" %}</th>
                    <th>{% trans "URL" %}</th>
                    <th>{% trans "Start date" %}</th>
                    <th>{% trans "End date" %}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for sponsor in sponsors %}
                    <tr>
                        <td>
                            {% if sponsor.logo %}
                                <img class="size-8 rounded object-contain" src="{{ sponsor.logo.url }}" alt="">
                            {% endif %}
                        </td>
                        <td class="font-semibold">{{ sponsor.name }}</td>
                        <td>
                            {% if sponsor.url %}
                                <a class="link link-hover break-all" href="{{ sponsor.url }}" target="_blank" rel="noopener noreferrer">{{ sponsor.url }}</a>
                            {% else %}
                                <span class="text-dim">&mdash;</span>
                            {% endif %}
                        </td>
                        <td class="font-mono text-xs">{{ sponsor.start_date|date:"Y-m-d" }}</td>
                        <td class="font-mono text-xs">{{ sponsor.end_date|date:"Y-m-d"|default:"—" }}</td>
                        <td class="text-right">
                            <div class="flex justify-end gap-1">
                                <a class="btn btn-outline btn-sm" href="{% url 'management:sponsor_update' sponsor.pk %}" aria-label="{% trans 'Edit' %}">{% lucide "pencil" size=14 %} {% trans "Edit" %}</a>
                                <button class="btn btn-sm btn-outline btn-error" type="button" onclick="document.getElementById('{{ sponsor.pk|dom_id:"sponsor_delete_modal" }}').showModal()" aria-label="{% trans 'Delete' %}">{% lucide "trash-2" size=14 %} {% trans "Delete" %}</button>
                            </div>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="6" class="text-center text-dim">{% trans "No sponsors yet." %}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% trans "Delete sponsor" as delete_sponsor_title %}
    {% trans "Delete" as delete_label %}
    {% for sponsor in sponsors %}
        {% url 'management:sponsor_delete' sponsor.pk as sponsor_delete_url %}
        {% blocktrans with name=sponsor.name asvar delete_sponsor_body %}Delete “{{ name }}”? This cannot be undone.{% endblocktrans %}
        {% include "controlpanel/_confirm_modal.html" with modal_id=sponsor.pk|dom_id:"sponsor_delete_modal" title=delete_sponsor_title body=delete_sponsor_body action_url=sponsor_delete_url submit_label=delete_label %}
    {% endfor %}
{% endblock panel %}