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

{% block heading %}{{ series.title }}{% endblock heading %}

{% block topbar_context %}
    <span class="badge {% if series.kind == "game" %}badge-error{% elif series.kind == "training" %}badge-info{% elif series.kind == "tournament" %}badge-warning{% elif series.kind == "meeting" %}badge-neutral{% elif series.kind == "social" %}border-violet/30 bg-violet/10 text-violet{% else %}badge-outline{% endif %}">
        {{ series.get_kind_display }}
    </span>
    <span class="font-mono text-xs text-muted">{{ recurrence_summary }}</span>
{% endblock topbar_context %}

{% block actions %}
    {% if can_manage %}
        <a class="btn btn-outline gap-2" href="{% url 'management:event_series_update' series.pk %}">{% lucide "pencil" size=16 %} {% trans "Edit" %}</a>
        <form method="post" action="{% url 'management:event_series_generate' series.pk %}">
            {% csrf_token %}
            <button class="btn btn-outline gap-2" type="submit">{% lucide "refresh-cw" size=16 %} {% trans "Regenerate occurrences" %}</button>
        </form>
        <button class="btn btn-outline btn-warning gap-2" type="button" onclick="document.getElementById('series_stop_modal').showModal()">{% lucide "octagon-pause" size=16 %} {% trans "Stop repeating" %}</button>
        <button class="btn btn-outline btn-error gap-2" type="button" onclick="document.getElementById('series_delete_modal').showModal()">{% lucide "trash-2" size=16 %} {% trans "Delete series" %}</button>
    {% endif %}
{% endblock actions %}

{% block panel %}
    <div class="grid gap-4 lg:grid-cols-2">
        <div class="card">
            <div class="card-body">
                <h2 class="card-title text-base">{% lucide "repeat" size=18 %} {% trans "Recurrence" %}</h2>
                <dl>
                    <div class="flex items-center justify-between gap-4 py-2">
                        <dt class="text-sm text-muted">{% trans "Pattern" %}</dt>
                        <dd class="text-sm text-ink">{{ recurrence_summary }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 py-2">
                        <dt class="text-sm text-muted">{% trans "First occurrence" %}</dt>
                        <dd class="font-mono text-sm text-ink">{{ series.dtstart|date:"j M Y H:i" }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 py-2">
                        <dt class="text-sm text-muted">{% trans "Repeats until" %}</dt>
                        <dd class="font-mono text-sm text-ink">{{ series.until|date:"j M Y H:i"|default:"—" }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 py-2">
                        <dt class="text-sm text-muted">{% trans "Generated up to" %}</dt>
                        <dd class="font-mono text-sm text-ink">{{ series.generated_until|date:"j M Y"|default:"—" }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h2 class="card-title text-base">{% lucide "info" size=18 %} {% trans "Template" %}</h2>
                <dl>
                    <div class="flex items-center justify-between gap-4 py-2">
                        <dt class="text-sm text-muted">{% trans "Location" %}</dt>
                        <dd class="text-sm text-ink">{{ series.location|default:"—" }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 py-2">
                        <dt class="text-sm text-muted">{% trans "Opponent" %}</dt>
                        <dd class="text-sm text-ink">{{ series.opponent|default:"—" }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 py-2">
                        <dt class="text-sm text-muted">{% trans "Teams" %}</dt>
                        <dd class="text-sm text-ink">{% for team in series.teams.all %}{{ team.name }}{% if not forloop.last %}, {% endif %}{% empty %}—{% endfor %}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <h2 class="card-title text-base">{% lucide "calendar" size=18 %} {% trans "Occurrences" %}</h2>
            <div class="overflow-x-auto overflow-y-visible">
                <table class="table">
                    <thead>
                        <tr>
                            <th>{% trans "When" %}</th>
                            <th>{% trans "Status" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for occurrence in occurrences %}
                            <tr>
                                <td class="font-mono text-sm font-semibold"><a class="link link-hover" href="{% url 'management:event_detail' occurrence.pk %}">{{ occurrence.start|date:"j M Y H:i" }}</a></td>
                                <td>
                                    {% if occurrence.cancelled %}
                                        <span class="badge badge-outline gap-1">{% lucide "ban" size=12 %} {% trans "Cancelled" %}</span>
                                    {% elif occurrence.detached %}
                                        <span class="badge badge-neutral gap-1">{% lucide "unlink" size=12 %} {% trans "Detached" %}</span>
                                    {% elif occurrence.is_past %}
                                        <span class="badge badge-outline">{% trans "Past" %}</span>
                                    {% else %}
                                        <span class="badge badge-success">{% trans "Upcoming" %}</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="2" class="py-8 text-center text-muted">{% trans "No occurrences generated yet." %}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock panel %}

{% block extra_body %}
    {% if can_manage %}
        {% trans "Stop repeating" as stop_title %}
        {% blocktrans with name=series.title asvar stop_body %}Stop “{{ name }}” from generating new occurrences? Existing ones (past and future) are left exactly as they are — this only affects what happens from here on.{% endblocktrans %}
        {% url 'management:event_series_stop' series.pk as stop_url %}
        {% include "controlpanel/_confirm_modal.html" with modal_id="series_stop_modal" title=stop_title body=stop_body action_url=stop_url submit_label=stop_title submit_icon="octagon-pause" %}

        {% trans "Delete series" as delete_title %}
        {% blocktrans with name=series.title asvar delete_body %}Delete “{{ name }}”? This also deletes every occurrence it has ever generated, past and future, and their attendance records. This cannot be undone — use “Stop repeating” instead if you just want it to stop.{% endblocktrans %}
        {% url 'management:event_series_delete' series.pk as delete_url %}
        {% include "controlpanel/_confirm_modal.html" with modal_id="series_delete_modal" title=delete_title body=delete_body action_url=delete_url submit_label=delete_title %}
    {% endif %}
{% endblock extra_body %}
