{% load i18n lucide %}
{% comment %}
    One referee sign-up row on M3's Calendar -- a home game the signed-in
    account (or a managed person -- a referee-eligible child is exactly as
    real as a referee-eligible parent, mobile/views.py's CalendarView) is
    eligible (and, once responded, confirmed) to referee for. Merged into
    the same chronological list as the account's own RSVP rows (mobile/
    _calendar_row.html), but in the referee accent (assets/mobile.css's
    --color-referee/.pill-referee) so it reads as a different kind of
    commitment at a glance.

    Expects ``row`` ({event, referee_signup, referee_member}) in scope --
    referee_member is only set once there's more than one managed person to
    tell apart, same rule mobile/_calendar_row.html's own ``member`` uses.
    Just a link to the event, same as every other calendar row -- no
    Accept/Decline here; event_detail.html's own "Refereeing" card (same
    signup) is where that action lives, so this row and every other one
    share one interaction model (tap through, act on the event page).
{% endcomment %}
<a class="flex items-center gap-3 bg-white px-4 py-3" href="{% url "mobile:event_detail" row.event.pk %}">
    <div class="w-9.5 shrink-0 text-center">
        <div class="font-mono text-[10px] tracking-wide text-muted uppercase">{{ row.event.start|date:"D" }}</div>
        <div class="font-display text-2xl leading-none font-extrabold text-ink">{{ row.event.start|date:"d" }}</div>
    </div>
    <div class="w-[3px] shrink-0 self-stretch rounded-full" style="background: var(--color-referee)"></div>
    <div class="min-w-0 flex-1">
        <div class="flex items-center gap-1 text-sm font-semibold text-ink">
            {% lucide "flag" size=13 stroke_width=2.4 class="shrink-0 text-referee" %}
            <span class="truncate">{% trans "Referee" %} &middot; {{ row.event.title }}</span>
        </div>
        <div class="truncate text-xs text-muted">
            {{ row.event.start|date:"H:i" }}
            {% if row.referee_member %}&middot; {{ row.referee_member.first_name }}{% endif %}
            {% for team in row.event.teams.all %}&middot; {{ team.name }}{% endfor %}
            {% if row.event.location %}&middot; {{ row.event.location.name }}{% endif %}
        </div>
    </div>
    <span class="pill {% if row.referee_signup.status == "accepted" %}pill-referee{% else %}pill-neutral{% endif %} shrink-0">
        {% if row.referee_signup.status == "accepted" %}{% trans "Confirmed" %}{% else %}{% trans "Reply needed" %}{% endif %}
    </span>
</a>