{% load static i18n lucide %}

{% comment %}
    App shell for Member mode (M1-M7) -- design_handoff_rosterchief_platform/README.md.
    Standalone, like management/base.html and controlpanel/base.html: its own
    stylesheet (assets/mobile.css), no daisyUI, no shared nav. Mobile-first,
    viewport-fit=cover + env(safe-area-inset-*) throughout (see mobile.css's own
    file banner) rather than the iOS bezel in the design canvas, which is
    presentation-only.

    The Coach/Member role switcher renders once has_coach_access is true (an
    account with >=1 current-season staff assignment -- mobile/mixins.py's
    PersonScopeMixin) -- Coach mode (C1-C6, mobile/coach_views.py) is being
    built out screen by screen; only what's actually shipped is linked to.

    hx-boost="true" on <body>: every same-shell link/form becomes an AJAX
    navigation (swapping <body>'s children, pushing the URL) instead of a
    full browser reload -- the SPA-like feel without an SPA. Only <body>'s
    *children* swap, not the tag itself, so anything that crosses into the
    differently-styled Coach shell (coach/base.html: bg-ink vs this page's
    bg-paper, its own hx-headers/data attrs) is marked hx-boost="false" to
    force a real navigation instead -- a boosted cross-shell swap would leave
    the OLD shell's <body> class/attributes in place under the NEW shell's
    content. See coach/base.html's own comment for the same rule mirrored
    the other direction.

    The page itself scrolls (body/document), not a boxed-in <main> -- header
    and tab bar are sticky (top-0/bottom-0) rather than the earlier fixed-
    height-shell-with-an-inner-overflow-auto-region approach, which read as
    two separate scrollable areas nested inside each other (most noticeable
    on Calendar's long agenda). A side benefit: htmx's boosted navigation
    scrolls the window back to top by default, which now actually resets
    what the user sees -- with the old inner <main> scroll it didn't.
{% 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="{{ club.primary_color|default:"#101e36" }}">
        <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 %}
        {% if club.primary_color %}
            <style>
                :root { --tenant-navy: {{ club.primary_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="scrollbar-hide flex min-h-screen flex-col bg-paper font-sans text-slate" hx-boost="true" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' data-vapid-public-key="{{ vapid_public_key }}" data-csrftoken="{{ csrf_token }}">
        <header class="app-header sticky top-0 z-20">
            <div class="flex min-h-11 items-center gap-2.5">
                <a class="flex items-center gap-2.5" href="{% url "mobile:home" %}">
                    {% 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">
                        <span class="block truncate font-display text-[19px] leading-none font-extrabold text-white uppercase">{{ club.name }}</span>
                        {% if season %}<span class="block font-mono text-xs text-on-dark">{% blocktrans with name=season.name %}Season {{ name }}{% endblocktrans %}</span>{% endif %}
                    </span>
                </a>
                <div class="flex-1"></div>
                <a class="relative flex h-11 w-11 shrink-0 items-center justify-center" href="{% url "mobile:notifications" %}" aria-label="{% trans "Notifications" %}">
                    {% lucide "bell" size=21 class="text-white" %}
                    {% if unread_notification_count %}
                        <span class="absolute -top-1 -right-1 flex h-[19px] min-w-[19px] items-center justify-center rounded-full bg-club px-1 font-mono text-[11px] font-bold text-white" style="border: 2px solid var(--color-navy)">
                            {% if unread_notification_count > 9 %}9+{% else %}{{ unread_notification_count }}{% endif %}
                        </span>
                    {% endif %}
                </a>
            </div>
            {% if has_coach_access %}
                <div class="role-switcher">
                    <a class="role-switcher-item role-switcher-item-active" href="{% url "mobile:home" %}">{% trans "Member" %}</a>
                    <a class="role-switcher-item" href="{% url "mobile:coach_today" %}" hx-boost="false">{% trans "Manager" %}</a>
                </div>
            {% endif %}
            {% block header_extra %}{% endblock header_extra %}
        </header>

        <main class="flex-1">
            <div class="flex flex-col gap-4 px-4 py-4">
                {% 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="tab-bar sticky bottom-0 z-20">
            <a class="tab-bar-item {% if active_tab == "home" %}tab-bar-item-active{% endif %}" href="{% url "mobile:home" %}">
                {% lucide "house" size=21 %}
                <span class="tab-bar-label">{% trans "Home" %}</span>
            </a>
            <a class="tab-bar-item {% if active_tab == "calendar" %}tab-bar-item-active{% endif %}" href="{% url "mobile:calendar" %}">
                {% lucide "calendar" size=21 %}
                <span class="tab-bar-label">{% trans "Calendar" %}</span>
            </a>
            <a class="tab-bar-item {% if active_tab == "news" %}tab-bar-item-active{% endif %}" href="{% url "mobile:news_list" %}">
                {% lucide "newspaper" size=21 %}
                <span class="tab-bar-label">{% trans "News" %}</span>
            </a>
            <a class="tab-bar-item {% if active_tab == "me" %}tab-bar-item-active{% endif %}" href="{% url "mobile:me" %}">
                {% lucide "user" size=21 %}
                <span class="tab-bar-label">{% trans "Me" %}</span>
            </a>
        </nav>

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