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

{% comment %}
    M5 -- design_handoff_rosterchief_platform/README.md's M5 section, "Me &
    my people". See MeView's own docstring (mobile/views.py) for the judgment
    calls: no license/eligibility field backing "licence OK", so each row's
    meta line is real roster data instead; "Household & contacts" has no
    screen to lead to and is omitted, same for the mockup's "Coach mode"
    promo. "Payments & dues" does lead somewhere (mobile:payments) and
    carries its "N OPEN" pill only once open_dues_count is actually > 0.
    "Teams I coach/manage" is new, beyond the mockup -- one row per current-season
    staff assignment, linking straight into Coach mode for that team.
    The avatar/name/subtitle row lives in header_extra -- merged into the
    shared navy app-header (base.html) rather than a separately-coloured
    block of its own, matching the design canvas's own M5 markup.
{% endcomment %}

{% block header_extra %}
    {% if managed_people %}
        <div class="mt-3 flex items-center gap-3">
            {% include "mobile/_avatar.html" with person=me size_class="h-14 w-14" text_class="text-xl" bg_class="bg-club" %}
            <div class="min-w-0 flex-1">
                <div class="font-display text-xl leading-none font-extrabold text-white uppercase">{{ me.get_full_name }}</div>
                {% if member_since or team_manager_label %}
                    <div class="mt-1.5 text-[13px] text-on-dark-dim">
                        {% if member_since %}{% blocktrans with year=member_since|date:"Y" %}Member since {{ year }}{% endblocktrans %}{% endif %}
                        {% if member_since and team_manager_label %}&middot;{% endif %}
                        {{ team_manager_label }}
                    </div>
                {% endif %}
            </div>
        </div>
    {% endif %}
{% endblock header_extra %}

{% block content %}
    {% if not managed_people %}
        <div class="m-card p-6 text-center">
            <p class="font-display text-lg font-extrabold text-ink uppercase">{% trans "No one to show yet" %}</p>
            <p class="mt-1 text-sm text-muted">{% trans "Once you're linked to a member record, your profile will show up here." %}</p>
        </div>
    {% else %}
        <div>
            <div class="mb-2 font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "People I manage" %}</div>
            <div class="m-card overflow-hidden">
                {% for row in people_rows %}
                    {% if not forloop.first %}<div class="h-px bg-rule"></div>{% endif %}
                    <a class="flex items-center gap-3 p-3.5" href="{% url "mobile:edit_profile" row.person.pk %}">
                        {% include "mobile/_avatar.html" with person=row.person %}
                        <div class="min-w-0 flex-1">
                            <div class="text-[15px] font-semibold text-ink">
                                {{ row.person.get_full_name }}
                                {% if row.person == me %}<span class="text-xs text-muted">{% trans "(me)" %}</span>{% endif %}
                            </div>
                            {% if row.membership %}
                                <div class="text-xs text-muted">
                                    {{ row.membership.team.short_name }}
                                    {% if row.membership.jersey_number %}&middot; #{{ row.membership.jersey_number }}{% endif %}
                                </div>
                            {% endif %}
                        </div>
                        {% lucide "chevron-right" size=18 class="shrink-0 text-dim" %}
                    </a>
                {% endfor %}
            </div>
        </div>

        {% if staff_assignments %}
            <div>
                <div class="mb-2 font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "Teams I coach/manage" %}</div>
                <div class="m-card-dark overflow-hidden">
                    {% for assignment in staff_assignments %}
                        {% if not forloop.first %}<div class="h-px bg-white/10"></div>{% endif %}
                        <a class="flex items-center gap-3 p-3.5" href="{% url "mobile:coach_today" %}?team={{ assignment.team.pk }}" hx-boost="false">
                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-steel text-ice">
                                {% lucide "users" size=20 stroke_width=2.4 %}
                            </span>
                            <div class="min-w-0 flex-1">
                                <div class="text-[15px] font-semibold text-white">{{ assignment.team.name }}</div>
                                <div class="text-xs text-on-dark-dim">{{ assignment.position }}</div>
                            </div>
                            {% lucide "chevron-right" size=18 class="shrink-0 text-on-dark-dim" %}
                        </a>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        <div class="m-card overflow-hidden">
            <a class="flex items-center gap-3 p-3.5" href="{% url "mobile:edit_profile" me.pk %}">
                <span class="flex-1 text-[15px] font-semibold text-ink">{% trans "Personal details" %}</span>
                {% lucide "chevron-right" size=18 class="shrink-0 text-dim" %}
            </a>
            <div class="h-px bg-rule"></div>
            <a class="flex items-center gap-3 p-3.5" href="{% url "mobile:payments" %}">
                <span class="flex-1 text-[15px] font-semibold text-ink">{% trans "Payments & dues" %}</span>
                {% if open_dues_count %}
                    <span class="pill pill-danger shrink-0">
                        {% blocktrans count counter=open_dues_count %}{{ counter }} OPEN{% plural %}{{ counter }} OPEN{% endblocktrans %}
                    </span>
                {% endif %}
                {% lucide "chevron-right" size=18 class="shrink-0 text-dim" %}
            </a>
            <div class="h-px bg-rule"></div>
            <a class="flex items-center gap-3 p-3.5" href="{% url "mobile:notifications" %}">
                <span class="flex-1 text-[15px] font-semibold text-ink">{% trans "Notifications" %}</span>
                {% lucide "chevron-right" size=18 class="shrink-0 text-dim" %}
            </a>
            <div class="h-px bg-rule"></div>
            <a class="flex items-center gap-3 p-3.5" href="{% url "mobile:calendar_feed_settings" %}">
                <span class="flex-1 text-[15px] font-semibold text-ink">{% trans "Calendar sync" %}</span>
                {% lucide "chevron-right" size=18 class="shrink-0 text-dim" %}
            </a>
        </div>

        <p class="pb-2 text-center text-xs text-dim">{% blocktrans with club_name=club.name %}RosterChief &middot; {{ club_name }} &middot; v1.0{% endblocktrans %}</p>
    {% endif %}
{% endblock content %}