{% 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.
    Accept/Decline are two small forms, not a single multi-button one --
    and, unlike this app's RSVP forms, boosted (no hx-boost="false"):
    nothing here is Alpine-owned/toggled, so there's no htmx/Alpine conflict
    to dodge, and a boosted POST avoids the jarring full-page reload a plain
    form submit would cause on a page the user is mid-scroll on.
{% endcomment %}
<div class="flex items-center gap-3 bg-white px-4 py-3">
    <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>
    {% if row.referee_signup.status == "accepted" %}
        <span class="pill pill-referee shrink-0">{% trans "Confirmed" %}</span>
    {% else %}
        <div class="flex shrink-0 gap-1.5">
            <form method="post" action="{% url "mobile:referee_signup_respond" row.referee_signup.pk %}">
                {% csrf_token %}
                <input type="hidden" name="response" value="accept">
                <button type="submit" class="pill pill-referee">{% trans "I'll ref" %}</button>
            </form>
            <form method="post" action="{% url "mobile:referee_signup_respond" row.referee_signup.pk %}">
                {% csrf_token %}
                <input type="hidden" name="response" value="decline">
                <button type="submit" class="pill pill-neutral">{% trans "Can't" %}</button>
            </form>
        </div>
    {% endif %}
</div>