{% load static i18n lucide %}

{% comment %}
    App shell for Coach mode (C1-C6) -- design_handoff_rosterchief_platform/README.md's
    "Coach mode (mobile, dark chrome)" section. Standalone from mobile/templates/mobile/
    base.html (Member mode's shell) rather than a shared parent: the two have almost no
    markup in common beyond the outer <html>/<body> skeleton -- dark ink header instead
    of the member shell's club-themed navy, with the role switcher's own active segment
    in ice-blue (assets/mobile.css's .role-switcher-item-active-ice) as the mode's own
    accent -- and a dark .coach-tab-bar instead of the white one.

    Reuses the SAME stylesheet (static/css/mobile.css) and the same mobile:manifest/
    mobile:icon/mobile:service_worker PWA plumbing as Member mode -- one app, one
    manifest, two modes, not two separate PWAs.

    The top info row (crest + team name) carries the same min-h-11 as the member
    header's own top row (implicitly 44px there, via its bell button) -- the role
    switcher pill sits directly below that row in both shells, so switching modes never
    shifts its position. The team-picker pill row (multi-team accounts only) renders
    *after* the switcher for the same reason -- were it above, the switcher would jump
    down whenever it appears.

    Tab bar: Today / Squad / Schedule, plus a raised "+" action at the end that opens a
    small popup menu (New event / New post / Add player) rather than committing to one
    destination -- coach mode has three genuinely different "add" actions and picking a
    single one for the button would just hide the other two. No Me tab here -- the
    account's own settings live in Member mode's mobile:me, reached via the role
    switcher above, not duplicated as a second Me screen.

    hx-boost="true" on <body>: every same-shell link/form becomes an AJAX navigation
    instead of a full browser reload -- see mobile/templates/mobile/base.html's own
    comment for the full reasoning. Only <body>'s children swap, not the tag itself, so
    anything that crosses back into the Member shell (bg-paper, its own data attrs) is
    marked hx-boost="false" to force a real navigation instead.
{% endcomment %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en" }}">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
        <meta name="theme-color" content="#0b1220">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="mobile-web-app-capable" content="yes">

        <title>{% block title %}{{ screen_title }} &middot; {{ club.name }}{% endblock title %}</title>

        <link rel="manifest" href="{% url "mobile:manifest" %}">
        <link rel="apple-touch-icon" href="{% url "mobile:icon" size=192 %}">
        <link rel="icon" href="{% url "mobile:icon" size=192 %}">
        <link rel="stylesheet" href="{% static "css/mobile.css" %}">

        {% if club.secondary_color %}
            <style>
                :root {
                    --tenant-club: {{ club.secondary_color }};
                    --tenant-club-dark: color-mix(in srgb, {{ club.secondary_color }} 80%, black);
                    --tenant-club-content: {{ club.secondary_content_color }};
                }
            </style>
        {% endif %}

        <script src="{% static "js/htmx.js" %}" defer></script>
        <script src="{% static "js/alpine.js" %}" defer></script>

        {% block extra_head %}{% endblock extra_head %}
    </head>

    <body class="flex h-screen flex-col overflow-hidden bg-ink font-sans text-slate" hx-boost="true" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' data-csrftoken="{{ csrf_token }}">
        <header class="coach-header">
            <div class="flex min-h-11 items-center gap-2.5">
                {% if club.logo %}
                    <img class="app-crest" src="{{ club.logo.url }}" alt="">
                {% else %}
                    <span class="app-crest app-crest-fallback">{{ club.initials }}</span>
                {% endif %}
                <span class="min-w-0 flex-1">
                    <span class="block truncate font-display text-[19px] leading-none font-extrabold text-white uppercase">{{ active_team.name|default:club.name }}</span>
                    {% if me and active_team_role %}<span class="block font-mono text-xs text-on-dark">{{ active_team_role }} &middot; {{ me.first_name }}</span>{% endif %}
                </span>
            </div>

            <div class="role-switcher">
                <a class="role-switcher-item" href="{% url "mobile:home" %}" hx-boost="false">{% trans "Member" %}</a>
                <a class="role-switcher-item role-switcher-item-active-ice" href="{% url "mobile:coach_today" %}">{% trans "Manager" %}</a>
            </div>

            {% if staffed_teams|length > 1 %}
                <div class="mt-3 flex gap-2 overflow-x-auto scrollbar-hide">
                    {% for team in staffed_teams %}
                        <a class="shrink-0 rounded-full px-3 py-1.5 font-display text-xs font-extrabold tracking-wide uppercase {% if team == active_team %}bg-ice text-ice-ink{% else %}bg-steel text-on-dark{% endif %}" href="?team={{ team.pk }}">
                            {{ team.short_name }}
                        </a>
                    {% endfor %}
                </div>
            {% endif %}

            {% block header_extra %}{% endblock header_extra %}
        </header>

        <main class="coach-sheet scrollbar-hide">
            <div class="flex flex-col gap-4 px-4 py-5">
                {% if messages %}
                    <div class="flex flex-col gap-2">
                        {% for message in messages %}
                            <div class="m-card p-3 text-sm font-medium text-ink">{{ message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}

                {% block content %}{% endblock content %}
            </div>
        </main>

        <nav class="coach-tab-bar">
            <a class="coach-tab-bar-item {% if active_tab == "coach_today" %}coach-tab-bar-item-active{% endif %}" href="{% url "mobile:coach_today" %}">
                {% lucide "house" size=21 %}
                <span class="tab-bar-label">{% trans "Today" %}</span>
            </a>
            <a class="coach-tab-bar-item {% if active_tab == "coach_squad" %}coach-tab-bar-item-active{% endif %}" href="{% url "mobile:coach_squad" %}">
                {% lucide "users" size=21 %}
                <span class="tab-bar-label">{% trans "Squad" %}</span>
            </a>
            <a class="coach-tab-bar-item {% if active_tab == "coach_schedule" %}coach-tab-bar-item-active{% endif %}" href="{% url "mobile:coach_schedule" %}">
                {% lucide "calendar" size=21 %}
                <span class="tab-bar-label">{% trans "Schedule" %}</span>
            </a>

            {% if can_manage_active_team %}
                <div class="coach-tab-bar-add" x-data="{ open: false }">
                    <button class="coach-tab-bar-add-button" type="button" @click="open = !open" aria-label="{% trans "Add" %}">
                        {% lucide "plus" size=24 %}
                    </button>
                    <div class="absolute inset-x-3 bottom-full z-20 mb-3 flex flex-col gap-1 rounded-xl border border-line bg-white p-2 shadow-lg" x-show="open" x-cloak @click.outside="open = false">
                        <a class="flex items-center gap-3 rounded-lg p-3 text-sm font-semibold text-ink" href="{% url "mobile:coach_create_event" %}">
                            {% lucide "calendar-plus" size=18 class="text-club" %} {% trans "New event" %}
                        </a>
                        <a class="flex items-center gap-3 rounded-lg p-3 text-sm font-semibold text-ink" href="{% url "mobile:coach_create_news" %}">
                            {% lucide "newspaper" size=18 class="text-club" %} {% trans "New post" %}
                        </a>
                        <a class="flex items-center gap-3 rounded-lg p-3 text-sm font-semibold text-ink" href="{% url "mobile:coach_add_player" %}">
                            {% lucide "user-plus" size=18 class="text-club" %} {% trans "Add player" %}
                        </a>
                    </div>
                </div>
            {% else %}
                <div class="coach-tab-bar-add"></div>
            {% endif %}
        </nav>

        <script src="{% static "js/mobile-app.js" %}" defer></script>
        {% block extra_body %}{% endblock extra_body %}
    </body>
</html>
