{% 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", then
    everything further out grouped by calendar month (see CalendarView's own
    docstring -- later_months is a list of {month_start, rows}). No person
    switcher and no club-wide toggle here -- always every event
    self.managed_people is invited to, plus (merged into the same
    chronological list, each its own accent colour/look):
      - any home game a managed person is eligible to referee -- see
        mobile/_calendar_referee_row.html;
      - any event a managed person would normally be invited to but can't sign
        up for yet, because an open onboarding requirement blocks it -- see
        mobile/_calendar_blocked_row.html. Without this row it would just
        silently never appear (events.services.attendance.effective_members
        already excludes it), with no explanation at all.
    A real, working ?kind= filter (All/Games/Practices) stands in for the
    design mock's "Games only" pill; its List/Month toggle isn't reproduced --
    that's a second view mode, not a filter. -mx-4 (on the row groups only,
    not this filter row) 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.
{% endcomment %}

{% block header_extra %}
    <div class="mt-3">
        <span class="font-display text-2xl font-extrabold text-white uppercase">{% trans "Calendar" %}</span>
    </div>
{% endblock header_extra %}

{% block content %}
    <div class="flex gap-2">
        <a class="flex h-9 flex-1 items-center justify-center rounded-full font-display text-xs font-extrabold tracking-wide uppercase {% if not kind_filter %}bg-ink text-white{% else %}border border-line bg-white text-muted{% endif %}" href="{% url "mobile:calendar" %}">
            {% trans "All" %}
        </a>
        <a class="flex h-9 flex-1 items-center justify-center rounded-full font-display text-xs font-extrabold tracking-wide uppercase {% if kind_filter == "game" %}bg-ink text-white{% else %}border border-line bg-white text-muted{% endif %}" href="?kind=game">
            {% trans "Games" %}
        </a>
        <a class="flex h-9 flex-1 items-center justify-center rounded-full font-display text-xs font-extrabold tracking-wide uppercase {% if kind_filter == "training" %}bg-ink text-white{% else %}border border-line bg-white text-muted{% endif %}" href="?kind=training">
            {% trans "Practices" %}
        </a>
    </div>

    <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 and not later_months %}
            <div class="mx-4">
                <div class="m-card p-6 text-center">
                    {% if kind_filter == "game" %}
                        <p class="text-sm text-muted">{% trans "No games scheduled." %}</p>
                    {% elif kind_filter == "training" %}
                        <p class="text-sm text-muted">{% trans "No practices scheduled." %}</p>
                    {% else %}
                        <p class="text-sm text-muted">{% trans "Nothing scheduled." %}</p>
                    {% endif %}
                </div>
            </div>
        {% else %}
            {% if this_week %}
                <div>
                    <div class="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 %}
                            {% if row.blocked_requirements %}{% include "mobile/_calendar_blocked_row.html" %}{% elif row.referee_signup %}{% include "mobile/_calendar_referee_row.html" %}{% else %}{% include "mobile/_calendar_row.html" %}{% endif %}
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {% if next_week %}
                <div>
                    <div class="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 %}
                            {% if row.blocked_requirements %}{% include "mobile/_calendar_blocked_row.html" %}{% elif row.referee_signup %}{% include "mobile/_calendar_referee_row.html" %}{% else %}{% include "mobile/_calendar_row.html" %}{% endif %}
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {% for month in later_months %}
                <div>
                    <div class="bg-paper px-4 py-2 font-display text-xs font-extrabold tracking-wide text-muted uppercase">{{ month.month_start|date:"F Y" }}</div>
                    <div class="flex flex-col gap-px bg-line">
                        {% for row in month.rows %}
                            {% if row.blocked_requirements %}{% include "mobile/_calendar_blocked_row.html" %}{% elif row.referee_signup %}{% include "mobile/_calendar_referee_row.html" %}{% else %}{% include "mobile/_calendar_row.html" %}{% endif %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>
{% endblock content %}
