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

{% block heading %}{% trans "Events" %}{% endblock heading %}

{% block actions %}
    {% if is_club_admin and rbihf_enabled %}
        <a class="btn btn-outline gap-2" href="{% url 'management:rbihf_import' %}">{% lucide "download" size=16 %} {% trans "Import from RBIHF" %}</a>
    {% endif %}
    {% if can_create %}
        <a class="btn btn-outline gap-2" href="{% url 'management:event_series_create' %}">{% lucide "repeat" size=16 %} {% trans "New series" %}</a>
        <a class="btn btn-outline gap-2" href="{% url 'management:event_create' %}">{% lucide "plus" size=16 %} {% trans "New event" %}</a>
    {% endif %}
{% endblock actions %}

{% block panel %}
    <form method="get" class="mb-4">
        <div class="flex flex-row flex-wrap items-center gap-2">
            <select name="season" class="select select-bordered">
                {% for season in seasons %}
                    <option value="{{ season.pk }}" {% if season.pk == selected_season.pk %}selected{% endif %}>{% trans "Season" %} {{ season.start_date|date:"Y" }} - {{ season.end_date|date:"Y" }}</option>
                {% endfor %}
            </select>
            <select name="kind" class="select select-bordered">
                <option value="">{% trans "All kinds" %}</option>
                {% for value, label in event_kinds %}
                    <option value="{{ value }}" {% if value == selected_kind %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
            <label class="label cursor-pointer gap-2">
                <input type="checkbox" name="show_past" value="1" class="checkbox" {% if show_past %}checked{% endif %} onchange="this.form.submit()">
                <span class="label-text">{% trans "Show past events" %}</span>
            </label>
            <button class="btn btn-outline gap-2" type="submit">{% lucide "filter" size=16 %} {% trans "View" %}</button>
        </div>
    </form>

    <div class="card bg-base-100 shadow">
        <div class="card-body">
            <div class="overflow-x-auto">
                <table class="table table-cards">
                    <thead>
                        <tr>
                            <th>{% trans "Title" %}</th>
                            <th>{% trans "Kind" %}</th>
                            <th>{% trans "When" %}</th>
                            <th>{% trans "Teams" %}</th>
                            <th>{% trans "Location" %}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for event in events %}
                            <tr>
                                <td class="flex flex-row items-center gap-2 font-semibold">
                                    <a class="link link-hover" href="{% url 'management:event_detail' event.pk %}">{{ event.title }}</a>
                                    {% if event.series_id %}<span class="tooltip" data-tip="{% trans 'Part of a series' %}">{% lucide "repeat" size=12 %}</span>{% endif %}
                                </td>
                                <td data-label="{% trans 'Kind' %}">{{ event.get_kind_display }}</td>
                                <td data-label="{% trans 'When' %}">{{ event.start|date:"j M Y H:i" }}</td>
                                <td data-label="{% trans 'Teams' %}">{% for team in event.teams.all %}{{ team.short_name }}{% if not forloop.last %}, {% endif %}{% empty %}—{% endfor %}</td>
                                <td data-label="{% trans 'Location' %}">{{ event.location.name|default:"—" }}</td>
                                <td class="text-right">
                                    {% if event.can_manage %}
                                        <div class="flex justify-end gap-1">
                                            <a class="btn btn-outline btn-sm" href="{% url 'management:event_detail' event.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('{{ event.pk|dom_id:"event_delete_modal" }}').showModal()" aria-label="{% trans 'Delete' %}">{% lucide "trash-2" size=14 %} {% trans "Delete" %}</button>
                                        </div>
                                    {% endif %}
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="6" class="text-center opacity-60">{% trans "No events." %}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {% include "management/_pagination.html" %}

    {% comment %} Dialogs live outside the table: <tbody> may only contain <tr> elements. {% endcomment %}
    {% for event in events %}
        {% if event.can_manage %}
            <dialog id="{{ event.pk|dom_id:"event_delete_modal" }}" class="modal">
                <div class="modal-box">
                    <h3 class="text-lg font-bold">
                        {% if event.series_id %}{% trans "Cancel occurrence" %}{% else %}{% trans "Delete event" %}{% endif %}
                    </h3>
                    <form method="post" action="{% url 'management:event_delete' event.pk %}" id="{{ event.pk|dom_id:"event_delete_form" }}">
                        {% csrf_token %}
                        {% if event.series_id %}
                            {% blocktrans with name=event.title asvar delete_body %}Removes “{{ name }}” from the schedule. It won't be regenerated.{% endblocktrans %}
                            <p class="py-2 text-sm opacity-70">{{ delete_body }}</p>
                            <label class="label cursor-pointer justify-start gap-2">
                                <input type="checkbox" name="keep_record" class="checkbox">
                                <span class="label-text">{% trans "Keep a record of it (marks it cancelled instead of deleting it)" %}</span>
                            </label>
                        {% else %}
                            {% blocktrans with name=event.title asvar delete_body %}Delete “{{ name }}”? This cannot be undone.{% endblocktrans %}
                            <p class="py-2 text-sm opacity-70">{{ delete_body }}</p>
                        {% endif %}
                    </form>
                    <div class="modal-action">
                        <form method="dialog">
                            <button class="btn btn-outline gap-2">{% lucide "x" size=16 %} {% trans "Cancel" %}</button>
                        </form>
                        <button class="btn btn-error gap-2" type="submit" form="{{ event.pk|dom_id:"event_delete_form" }}">{% lucide "trash-2" size=16 %} {% trans "Confirm" %}</button>
                    </div>
                </div>
                <form method="dialog" class="modal-backdrop">
                    <button>close</button>
                </form>
            </dialog>
        {% endif %}
    {% endfor %}
{% endblock panel %}