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

{% comment %}
    M3 -- design_handoff_rosterchief_platform/README.md's M3 section: a full-
    width chronological agenda, grouped under "This week"/"Next week" (see
    CalendarView's own docstring for the browsing-window judgment call --
    current + next calendar week, no further paging). No person switcher and
    no club-wide toggle here -- always every event self.managed_people is
    invited to, full stop. -mx-4 breaks the rows out of base.html's shared
    page padding so they run edge-to-edge, matching the design canvas's own
    M3 markup (the desktop List/Month/"Games only" controls in that mock
    aren't reproduced here -- no real functionality behind them yet).
{% endcomment %}

{% block content %}
    <div class="-mx-4">
        {% if not managed_people %}
            <div class="mx-4">
                <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, their schedule will show up here." %}</p>
                </div>
            </div>
        {% elif not this_week and not next_week %}
            <div class="mx-4">
                <div class="m-card p-6 text-center">
                    <p class="text-sm text-muted">{% trans "Nothing scheduled in the next two weeks." %}</p>
                </div>
            </div>
        {% else %}
            {% if this_week %}
                <div>
                    <div class="sticky top-0 z-10 bg-paper px-4 py-2 font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "This week" %}</div>
                    <div class="flex flex-col gap-px bg-line">
                        {% for row in this_week %}
                            {% include "mobile/_calendar_row.html" %}
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {% if next_week %}
                <div>
                    <div class="sticky top-0 z-10 bg-paper px-4 py-2 font-display text-xs font-extrabold tracking-wide text-muted uppercase">{% trans "Next week" %}</div>
                    <div class="flex flex-col gap-px bg-line">
                        {% for row in next_week %}
                            {% include "mobile/_calendar_row.html" %}
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>
{% endblock content %}