{% load i18n lucide ui %}
<div class="flex items-center gap-3 px-4 py-3 {% if not forloop.last %}border-b border-line{% endif %}">
    <span class="badge badge-sm w-24 shrink-0 justify-center {% if event.kind == "game" %}badge-error{% elif event.kind == "training" %}badge-info{% elif event.kind == "tournament" %}badge-warning{% elif event.kind == "meeting" %}badge-neutral{% elif event.kind == "social" %}border-violet/30 bg-violet/10 text-violet{% else %}badge-outline{% endif %}">
        {{ event.get_kind_display }}
    </span>
    <div class="min-w-0 flex-1">
        <div class="flex items-center gap-1.5">
            <a class="link link-hover truncate font-semibold text-ink" href="{% url 'management:event_detail' event.pk %}">{{ event.title }}</a>
            {% if event.series_id %}
                <span class="shrink-0 text-dim" title="{% trans 'Part of a series' %}" aria-label="{% trans 'Part of a series' %}">{% lucide "repeat" size=12 %}</span>
            {% endif %}
        </div>
        <div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 font-mono text-xs text-muted">
            <span>{{ event.start|date:"D j M, H:i" }}</span>
            {% if event.teams.all %}<span>{% for team in event.teams.all %}{{ team.short_name }}{% if not forloop.last %}, {% endif %}{% endfor %}</span>{% endif %}
            {% if event.location %}<span>{{ event.location.name }}</span>{% endif %}
        </div>
    </div>
    {% if event.can_manage %}
        <div class="flex shrink-0 gap-1">
            <a class="btn btn-square btn-outline btn-sm" href="{% url 'management:event_detail' event.pk %}" aria-label="{% trans 'Edit' %}">{% lucide "pencil" size=14 %}</a>
            <button class="btn btn-square 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 %}</button>
        </div>
    {% endif %}
</div>