{% 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.
{% 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:"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 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 %}
                            <span class="pill pill-neutral">{{ answer.attendance.get_status_display }}</span>
                        {% 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: false, reason: '{{ answer.attendance.note|default:""|escapejs }}' }">
                                    <div class="flex gap-1.5" x-show="!asking">
                                        <form class="flex-1" method="post" action="{% url "mobile:event_detail" event.pk %}">
                                            {% 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>
                                        <form class="flex-1" method="post" action="{% url "mobile:event_detail" event.pk %}">
                                            {% csrf_token %}
                                            <input type="hidden" name="member_id" value="{{ answer.member.pk }}">
                                            <input type="hidden" name="status" value="maybe">
                                            <input type="hidden" name="next" value="event_detail">
                                            <button type="submit" class="btn h-11 w-full text-[15px] {% if status == "maybe" %}bg-steel text-white{% else %}bg-paper border border-stroke text-muted{% endif %}">{{ label_maybe }}</button>
                                        </form>
                                        <button type="button" class="btn h-11 w-full flex-1 text-[15px] {% if status == "absent" %}bg-club text-white{% else %}bg-paper border border-stroke text-muted{% endif %}" @click="asking = true">{{ label_out }}</button>
                                    </div>

                                    <form x-show="asking" x-cloak method="post" action="{% url "mobile:event_detail" event.pk %}">
                                        {% csrf_token %}
                                        <input type="hidden" name="member_id" value="{{ answer.member.pk }}">
                                        <input type="hidden" name="status" value="absent">
                                        <input type="hidden" name="next" value="event_detail">
                                        <label class="mb-1 block text-xs font-semibold text-muted">{% trans "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 flex gap-2">
                                            <button type="button" class="btn btn-secondary h-9 flex-1 text-xs" @click="asking = false">{% trans "Cancel" %}</button>
                                            <button type="submit" class="btn btn-dark h-9 flex-1 text-xs">{% trans "Confirm" %}</button>
                                        </div>
                                    </form>
                                </div>

                                {% if status == "absent" and answer.attendance.note %}
                                    <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 %}
        <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 %}