{#- Admin list of events, grouped by kind.

   Slots for features that build on events:
     events.admin.list.actions     header buttons beside "+ Add event"
                                   (render_template_hooks)
     events.admin.list.event_meta  called per row, hook(e), at the end of
                                   the event's meta line

   may_add, and may(endpoint, event) on each row, say whether the account
   may open the screen a button leads to, asked as that screen's own gate
   asks, for the event of the row, so no button answers 403.
-#}
{% extends "base_template.html" %}

{% block title %}Events{% endblock %}

{% block content %}
<div class="d-flex flex-column align-items-start gap-2 mb-4">
    <div>
        <h1 class="h3 mb-0">Events</h1>
        <p class="text-muted mb-0">Manage events and their kinds.</p>
    </div>
    {% set extra_actions = render_template_hooks("events.admin.list.actions") %}
    {% if extra_actions %}
    <div class="d-flex gap-2">
        {% if may_add %}<a href="{{ url_for('events.admin_new') }}" class="btn btn-primary">+ Add event</a>{% endif %}
        {{ extra_actions }}
    </div>
    {% elif may_add %}
    <a href="{{ url_for('events.admin_new') }}" class="btn btn-primary">+ Add event</a>
    {% endif %}
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
        <div class="alert alert-{{ 'danger' if category == 'danger' else 'success' }} py-2">{{ message }}</div>
    {% endfor %}
{% endwith %}

{% for group, events in groups.items() %}
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <strong>{{ group }}</strong>
        <span class="badge bg-secondary">{{ events | length }}</span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <tbody>
                {% for e in events %}
                <tr>
                    <td style="width:52px">
                        {% if e.image %}
                        <img src="{{ e.image | safe_url }}" alt="" style="width:38px;height:38px;border-radius:6px;object-fit:cover">
                        {% else %}
                        <span class="d-inline-flex align-items-center justify-content-center bg-light text-muted" style="width:38px;height:38px;border-radius:6px">{{ e.title[:1] | upper }}</span>
                        {% endif %}
                    </td>
                    <td>
                        <strong>{{ e.title }}</strong>
                        {% if not e.published %}<span class="badge bg-warning text-dark ms-1">draft</span>{% endif %}
                        <div class="text-muted small">
                            {% if e.starts_at %}{{ e.starts_at.strftime('%Y-%m-%d %H:%M') }}{% endif %}
                            {% if e.room %} · {{ e.room }}{% endif %}
                            {% if e.speaker %} · {{ e.speaker }}{% endif %}
                            {% for hook in get_template_hooks("events.admin.list.event_meta") %}{{ (hook(e) or "") | safe }}{% endfor %}
                        </div>
                    </td>
                    <td style="width:240px">
                        {% if may('events.admin_move', e) %}
                        <form method="POST" action="{{ url_for('events.admin_move', event_id=e.id) }}" class="d-flex gap-1">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <select name="group" class="form-select form-select-sm">
                                {% for g in known_groups %}<option value="{{ g }}" {{ 'selected' if g == e.kind else '' }}>{{ g }}</option>{% endfor %}
                            </select>
                            <button class="btn btn-sm btn-outline-secondary" type="submit" title="Move to kind">Move</button>
                        </form>
                        {% endif %}
                    </td>
                    <td style="width:150px" class="text-end">
                        {% if may('events.admin_edit', e) %}
                        <a href="{{ url_for('events.admin_edit', event_id=e.id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                        {% endif %}
                        {% if may('events.admin_delete', e) %}
                        {#- The question is translated, and the title goes into
                            it escaped. striptags gives the plain text back,
                            the title as it is written, and tojson writes it
                            into the script as one string, inside single
                            quotes, so no quote in it can end the string. -#}
                        <form method="POST" action="{{ url_for('events.admin_delete', event_id=e.id) }}" class="d-inline" onsubmit='return confirm({{ _("Remove %(title)s?", title=e.title) | striptags | tojson }})'>
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button class="btn btn-sm btn-outline-danger" type="submit" title="Remove"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endfor %}
{% endblock %}