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

{% comment %}
    M2 -- design_handoff_rosterchief_platform/README.md's M2 section, "answer
    for several". See EventDetailView's own docstring (mobile/views.py) for
    the judgment calls: no event photos, no Kit/dressing-room fields (the
    Event model has none), squad response is counts-only (never who answered
    what). The hero's background is the club's own generic event photo
    (Club.event_background, set on the identity page) shown in black & white
    under a dark gradient -- individual events have no photo of their own, so
    this is the one club-wide stand-in -- falling back to a plain dark
    background when the club hasn't uploaded one.

    The per-person In/Maybe/Out forms below are hx-boost="false" -- Alpine
    owns the toggle between this row's two sibling forms (buttons vs. the
    Out reason prompt), and having htmx *also* intercept the submit broke
    both. A real navigation for a write action is a fine trade; hx-boost's
    value is in link-to-link browsing, not every POST on the page.
{% endcomment %}

{% block content %}
    <div class="-mx-4 -mt-4 relative flex h-[220px] flex-col overflow-hidden" style="background: var(--color-navy)">
        {% if club.event_background %}
            <img class="absolute inset-0 h-full w-full object-cover grayscale" src="{{ club.event_background.url }}" alt="">
        {% endif %}
        <div class="absolute inset-0" style="background: linear-gradient(180deg, rgba(11,18,32,.5) 0%, rgba(11,18,32,.75) 60%, rgba(11,18,32,.96) 100%)"></div>
        <div class="relative z-10 flex flex-1 flex-col justify-end p-4 text-white">
            <a class="mb-auto flex h-11 w-11 items-center justify-center rounded-full bg-white/15" href="{% url "mobile:home" %}" aria-label="{% trans "Back" %}">
                {% lucide "chevron-left" size=20 stroke_width=2.4 class="text-white" %}
            </a>
            <span class="mb-2 inline-block w-fit rounded bg-club px-2 py-1 font-display text-xs font-extrabold tracking-wide text-white uppercase">
                {% if event.kind == "game" %}{% if event.is_home_game %}{% trans "Home game" %}{% else %}{% trans "Away game" %}{% endif %}{% else %}{{ event.get_kind_display }}{% endif %}
            </span>
            <h1 class="font-display text-4xl leading-[.98] font-extrabold uppercase">{{ event.title }}</h1>
        </div>
    </div>

    <div class="m-card flex flex-col gap-2.5 p-4">
        <div class="flex items-center gap-3.5">
            <span class="w-20 shrink-0 font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "Face-off" %}</span>
            <span class="text-[15px] font-semibold text-ink">{{ event.start|date:"D d M \a\t H:i" }}</span>
        </div>
        {% if event.gathering %}
            <div class="flex items-center gap-3.5">
                <span class="w-20 shrink-0 font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "Meet" %}</span>
                <span class="text-[15px] font-semibold text-ink">{{ event.gathering|date:"D d M \a\t H:i" }}</span>
            </div>
        {% endif %}
        {% if event.location %}
            <div class="flex items-center gap-3.5">
                <span class="w-20 shrink-0 font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "Where" %}</span>
                <span class="text-[15px] font-semibold text-ink">
                    {{ event.location.name }}<br>
                    <span class="text-[13px] font-normal text-muted">{{ event.location.address }}, {{ event.location.zip_code }} {{ event.location.city }}</span>
                </span>
            </div>
        {% endif %}
    </div>

    {% if referee_signup %}
        <div class="m-card p-4">
            <div class="flex items-center justify-between">
                <span class="font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "Refereeing" %}</span>
                {% if referee_signup.status == "accepted" %}<span class="pill pill-referee">{% trans "Confirmed" %}</span>{% endif %}
            </div>
            {% if referee_signup.status == "accepted" %}
                <p class="mt-2 text-sm text-muted">{% trans "You're confirmed to referee this game." %}</p>
            {% else %}
                <p class="mt-2 text-sm text-ink">{% trans "You're eligible to referee this game -- are you in?" %}</p>
                <div class="mt-3 grid grid-cols-2 gap-2">
                    <form method="post" action="{% url "mobile:referee_signup_respond" referee_signup.pk %}">
                        {% csrf_token %}
                        <input type="hidden" name="response" value="accept">
                        <input type="hidden" name="next" value="event_detail">
                        <button type="submit" class="btn w-full bg-referee text-white">{% trans "I'll ref" %}</button>
                    </form>
                    <form method="post" action="{% url "mobile:referee_signup_respond" referee_signup.pk %}">
                        {% csrf_token %}
                        <input type="hidden" name="response" value="decline">
                        <input type="hidden" name="next" value="event_detail">
                        <button type="submit" class="btn btn-secondary w-full">{% trans "Can't" %}</button>
                    </form>
                </div>
            {% endif %}
        </div>
    {% endif %}

    {% if lineup %}
        <div class="m-card p-4">
            <div class="flex items-center justify-between">
                <span class="font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "Line-up" %}</span>
                <span class="pill pill-info">{% trans "Published" %}</span>
            </div>
            <div class="mt-3 flex flex-col gap-3">
                {% for category in lineup_categories %}
                    <div>
                        <div class="mb-1.5 font-display text-xs font-extrabold tracking-wide text-club uppercase">{{ category.label }}</div>
                        <div class="flex flex-wrap gap-1.5">
                            {% for member in category.members %}<span class="pill pill-neutral">{{ member.get_full_name }}</span>{% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {% if your_answers %}
        <div class="m-card p-4">
            <span class="font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "Your answers" %}</span>
            <div class="mt-3 flex flex-col gap-3">
                {% for answer in your_answers %}
                    {% if not forloop.first %}<div class="h-px bg-rule"></div>{% endif %}
                    <div>
                        <div class="mb-2 flex items-center gap-2.5">
                            {% include "mobile/_avatar.html" with person=answer.member size_class="h-8 w-8" %}
                            <div class="min-w-0 flex-1">
                                <div class="text-[15px] font-semibold text-ink">{{ answer.member.get_full_name }}</div>
                                {% if answer.membership %}
                                    <div class="text-xs text-muted">
                                        {{ answer.membership.team.short_name }}
                                        {% if answer.membership.jersey_number %}&middot; #{{ answer.membership.jersey_number }}{% endif %}
                                        {% if answer.membership.position %}&middot; {{ answer.membership.position.name }}{% endif %}
                                    </div>
                                {% endif %}
                            </div>
                            {% if answer.attendance.status == "no_response" %}
                                <span class="pill pill-warn shrink-0">{% trans "No reply" %}</span>
                            {% endif %}
                        </div>
                        {% if rsvp_closed or lineup %}
                            <span class="pill pill-neutral">{{ answer.attendance.get_status_display }}</span>
                            {% if lineup and answer.attendance.status == "selected" %}
                                {% comment %}
                                    Only a SELECTED player sees this -- once they report a
                                    dropout, EventDetailView.post flips them to ABSENT, so a
                                    reload naturally drops this button and falls through to
                                    the shared note paragraph below instead.
                                {% endcomment %}
                                <div class="mt-2" x-data="{ asking: false, reason: '' }">
                                    <button type="button" class="btn btn-secondary h-9 w-full text-xs" x-show="!asking" @click="asking = true">{% trans "Can't make it after all" %}</button>
                                    <form x-show="asking" x-cloak method="post" action="{% url "mobile:event_detail" event.pk %}" hx-boost="false" class="rounded-lg border border-stroke bg-paper p-3">
                                        {% csrf_token %}
                                        <input type="hidden" name="member_id" value="{{ answer.member.pk }}">
                                        <input type="hidden" name="status" value="dropout">
                                        <input type="hidden" name="next" value="event_detail">
                                        <label class="mb-1 block text-xs font-semibold text-muted">{% trans "Let the coach know why -- they'll be notified right away" %}</label>
                                        <textarea class="h-16 w-full rounded-lg border border-stroke bg-white p-2 text-sm text-ink" name="note" x-model="reason" placeholder="{% trans "e.g. sick, injured, running late..." %}"></textarea>
                                        <div class="mt-2 grid grid-cols-2 gap-2">
                                            <button type="button" class="btn btn-secondary h-9 text-xs" @click="asking = false">{% trans "Cancel" %}</button>
                                            <button type="submit" class="btn btn-dark h-9 text-xs">{% trans "Send" %}</button>
                                        </div>
                                    </form>
                                </div>
                            {% endif %}
                        {% else %}
                            {% trans "In" as label_in %}
                            {% trans "Maybe" as label_maybe %}
                            {% trans "Out" as label_out %}
                            {% with status=answer.attendance.status %}
                                <div x-data="{ asking: null, reason: '{{ answer.attendance.note|default:""|escapejs }}' }">
                                    {# grid, not flex -- see _hero_rsvp.html's own comment: flex-1/min-w-0 kept letting a longer label win a wider share; grid-cols-3's tracks are content-independent. #}
                                    <div class="grid grid-cols-3 gap-1.5" x-show="!asking">
                                        <form method="post" action="{% url "mobile:event_detail" event.pk %}" hx-boost="false">
                                            {% csrf_token %}
                                            <input type="hidden" name="member_id" value="{{ answer.member.pk }}">
                                            <input type="hidden" name="status" value="present">
                                            <input type="hidden" name="next" value="event_detail">
                                            <button type="submit" class="btn h-11 w-full text-[15px] {% if status == "present" %}btn-positive{% else %}bg-paper border border-stroke text-muted{% endif %}">{{ label_in }}</button>
                                        </form>
                                        <button type="button" class="btn h-11 w-full text-[15px] {% if status == "maybe" %}bg-steel text-white{% else %}bg-paper border border-stroke text-muted{% endif %}" @click="asking = 'maybe'">{{ label_maybe }}</button>
                                        <button type="button" class="btn h-11 w-full text-[15px] {% if status == "absent" %}bg-club text-white{% else %}bg-paper border border-stroke text-muted{% endif %}" @click="asking = 'absent'">{{ label_out }}</button>
                                    </div>

                                    {% comment %}
                                        One shared reason form for both Maybe (optional) and Out
                                        (mandatory -- enforced server-side, EventDetailView.post) --
                                        :value on the hidden status input follows whichever button
                                        was tapped. No required/minlength attrs here: mixing that
                                        with a dynamic per-status requirement got fiddly for what
                                        the backend already enforces authoritatively regardless.
                                    {% endcomment %}
                                    <form x-show="asking" x-cloak method="post" action="{% url "mobile:event_detail" event.pk %}" hx-boost="false">
                                        {% csrf_token %}
                                        <input type="hidden" name="member_id" value="{{ answer.member.pk }}">
                                        <input type="hidden" name="status" :value="asking">
                                        <input type="hidden" name="next" value="event_detail">
                                        <label class="mb-1 block text-xs font-semibold text-muted" x-show="asking === 'absent'">{% trans "Reason -- only you and the coach can see this" %}</label>
                                        <label class="mb-1 block text-xs font-semibold text-muted" x-show="asking === 'maybe'">{% trans "Add a reason (optional) -- only you and the coach can see this" %}</label>
                                        <textarea class="h-16 w-full rounded-lg border border-stroke bg-paper p-2 text-sm text-ink" name="note" x-model="reason" placeholder="{% trans "e.g. sick, family event..." %}"></textarea>
                                        <div class="mt-2 grid grid-cols-2 gap-2">
                                            <button type="button" class="btn btn-secondary h-9 text-xs" @click="asking = null">{% trans "Cancel" %}</button>
                                            <button type="submit" class="btn btn-dark h-9 text-xs">{% trans "Confirm" %}</button>
                                        </div>
                                    </form>
                                </div>

                                {% if answer.attendance.note %}
                                    {# Only ever set alongside absent/maybe -- EventDetailView.post clears it for present. #}
                                    <p class="mt-1.5 text-xs text-muted italic">&ldquo;{{ answer.attendance.note }}&rdquo;</p>
                                {% endif %}
                            {% endwith %}
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {% if squad_summary %}
        <div class="m-card p-4">
            <div class="flex items-center justify-between">
                <span class="font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "Squad response" %}</span>
                <span class="text-[13px] text-muted">{% blocktrans with responded=squad_summary.responded total=squad_summary.total %}{{ responded }} of {{ total }}{% endblocktrans %}</span>
            </div>
            <div class="mt-2.5 flex h-2 overflow-hidden rounded-full bg-rule">
                <div class="bg-ok" style="width: {{ squad_summary.in_pct }}%"></div>
                <div class="bg-club" style="width: {{ squad_summary.out_pct }}%"></div>
                <div class="bg-line" style="width: {{ squad_summary.no_reply_pct }}%"></div>
            </div>
            <div class="mt-2 flex gap-3.5 text-[13px] text-muted">
                <span><strong class="text-ink">{{ squad_summary.in_count }}</strong> {% trans "in" %}</span>
                <span><strong class="text-ink">{{ squad_summary.out_count }}</strong> {% trans "out" %}</span>
                <span><strong class="text-ink">{{ squad_summary.no_reply_count }}</strong> {% trans "no reply" %}</span>
            </div>
        </div>
    {% endif %}

    {% if not your_answers and not squad_summary and not lineup and not referee_signup %}
        <div class="m-card p-6 text-center">
            <p class="text-sm text-muted">{% trans "No one you manage is invited to this event." %}</p>
        </div>
    {% endif %}
{% endblock content %}