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

{% comment %}
    C3 -- design_handoff_rosterchief_platform/README.md's C3 section, kept
    deliberately simple per product feedback: a plain yes/no toggle per
    available roster player, grouped by position ("category") rather than
    the mock's lines/slots -- see CoachLineupView's own docstring for why an
    earlier tap-to-place build was replaced. The mock's "fully dark screen"
    is approximated with dark cards throughout rather than overriding the
    shared .coach-sheet's own light background -- a real per-screen shell
    hook is more infrastructure than one screen justifies.

    The one form is hx-boost="false", same reasoning as every other
    write-action form in this app (see mobile/templates/mobile/event_detail.
    html's own top-of-file comment) -- each row's Yes/No pair is
    Alpine-owned (x-data toggling a hidden input), and this codebase hasn't
    established an htmx interaction pattern to layer on top of that safely.
{% endcomment %}

{% block header_extra %}
    <div class="mt-3 flex items-center justify-between">
        <span class="font-display text-xl leading-none font-extrabold text-white uppercase">{% trans "Line-up" %}</span>
        {% if lineup.published_at %}
            <span class="pill pill-info">{% trans "Published" %}</span>
        {% elif lineup.scheduled_publish_at %}
            <span class="pill pill-warn">{% trans "Scheduled" %}</span>
        {% endif %}
    </div>
    <div class="mt-1 text-xs text-on-dark">{{ event.title }} &middot; {{ event.start|date:"D d M H:i" }}</div>
{% endblock header_extra %}

{% block content %}
    <form method="post" action="{% url "mobile:coach_lineup" event.pk %}" hx-boost="false">
        {% csrf_token %}
        <div class="flex flex-col gap-3">
            {% for category in categories %}
                <div class="m-card-dark p-3">
                    <div class="mb-2 font-display text-xs font-extrabold tracking-wide text-ice uppercase">{{ category.label }}</div>
                    <div class="flex flex-col gap-2">
                        {% for row in category.rows %}
                            <div class="flex items-center gap-3" {% if can_manage_active_team %}x-data="{ state: '{{ row.selected|yesno:'true,false' }}' }"{% endif %}>
                                <div class="min-w-0 flex-1 text-sm text-white">
                                    {{ row.member.get_full_name }}
                                    {% if row.membership.jersey_number %}<span class="text-on-dark-dim">&middot; #{{ row.membership.jersey_number }}</span>{% endif %}
                                </div>
                                {% if can_manage_active_team %}
                                    <input type="hidden" name="selected_{{ row.member.pk }}" :value="state">
                                    <div class="flex h-9 w-24 shrink-0 overflow-hidden rounded-lg">
                                        <button type="button" class="flex-1 font-display text-xs font-extrabold tracking-wide uppercase" :class="state === 'true' ? 'bg-ok text-white' : 'bg-steel text-on-dark-dim'" @click="state = 'true'">{% trans "Yes" %}</button>
                                        <button type="button" class="flex-1 font-display text-xs font-extrabold tracking-wide uppercase" :class="state === 'false' ? 'bg-club text-white' : 'bg-steel text-on-dark-dim'" @click="state = 'false'">{% trans "No" %}</button>
                                    </div>
                                {% elif row.selected %}
                                    <span class="pill pill-ok shrink-0">{% trans "Yes" %}</span>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% empty %}
                <div class="m-card-dark p-6 text-center text-sm text-on-dark-dim">{% trans "No available players to pick from." %}</div>
            {% endfor %}
        </div>

        {% if can_manage_active_team %}
            <button class="btn btn-dark mt-3 w-full" type="submit">{% trans "Save line-up" %}</button>
        {% endif %}
    </form>

    {% if unavailable %}
        <div class="mt-1">
            <div class="mb-2 font-display text-xs font-extrabold tracking-wide text-on-dark-dim uppercase">{% trans "Unavailable" %}</div>
            <div class="flex flex-wrap gap-2">
                {% for attendance in unavailable %}
                    <span class="rounded-full bg-steel px-3 py-1.5 text-xs text-on-dark">{{ attendance.member.get_full_name }} &middot; {{ attendance.get_status_display }}</span>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {% if can_manage_active_team and not lineup.published_at %}
        {% if lineup.scheduled_publish_at %}
            <div class="m-card-dark mt-2 p-4">
                <p class="text-sm text-white">{% blocktrans with time=lineup.scheduled_publish_at|date:"D d M H:i" %}Scheduled to publish {{ time }}{% endblocktrans %}</p>
                <div class="mt-3 grid grid-cols-2 gap-2">
                    <form method="post" action="{% url "mobile:coach_lineup_publish" event.pk %}" hx-boost="false">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="publish_now">
                        <button class="btn w-full bg-ice text-ice-ink" type="submit">{% trans "Publish now" %}</button>
                    </form>
                    <form method="post" action="{% url "mobile:coach_lineup_publish" event.pk %}" hx-boost="false">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="cancel_schedule">
                        <button class="btn bg-steel text-on-dark w-full" type="submit">{% trans "Cancel schedule" %}</button>
                    </form>
                </div>
            </div>
        {% else %}
            <form class="mt-2" method="post" action="{% url "mobile:coach_lineup_publish" event.pk %}" hx-boost="false">
                {% csrf_token %}
                <input type="hidden" name="action" value="publish_now">
                <button class="btn w-full bg-ice text-ice-ink" type="submit">{% trans "Publish" %}</button>
            </form>
            <details class="mt-2">
                <summary class="cursor-pointer font-display text-xs font-extrabold tracking-wide text-on-dark-dim uppercase">{% trans "Or schedule for later" %}</summary>
                <form class="mt-2 flex items-center gap-2" method="post" action="{% url "mobile:coach_lineup_publish" event.pk %}" hx-boost="false">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="schedule">
                    <input type="datetime-local" name="publish_at" class="h-10 min-w-0 flex-1 rounded-lg border border-steel bg-steel px-2 text-sm text-white" required>
                    <button class="btn h-10 shrink-0 bg-steel text-on-dark" type="submit">{% trans "Schedule" %}</button>
                </form>
            </details>
        {% endif %}
    {% endif %}
{% endblock content %}