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

{% comment %}
    M1 -- design_handoff_rosterchief_platform/README.md's M1 section. The
    person switcher (chip row) sits in the white content area here, not the
    navy header -- matching the design canvas's own M1 markup, and Home is
    now the only screen that renders it at all (mobile/mixins.py's scope
    resolution still runs for every screen, but only Home's UI exposes it).
    Four independently-optional cards below it, scoped to people_in_scope --
    everyone the account manages once there's more than one ("All", on by
    default), or just the one person picked from the chip row. A hero for
    the soonest upcoming event with a quick In/Out RSVP, a "needs your
    answer" list, a season-dues card per person who owes money, and a news
    teaser.
{% endcomment %}

{% block content %}
    {% if managed_people|length > 1 %}
        <div class="scrollbar-hide -mt-1 flex gap-2 overflow-x-auto pb-0.5">
            <a class="person-chip {% if scope_everyone %}person-chip-active{% endif %}" href="?as=all">
                <span class="person-chip-avatar">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="3"/><circle cx="17" cy="9" r="2.6"/><path d="M2.5 20c0-3.3 2.5-5.6 5.5-5.6s5.5 2.3 5.5 5.6"/><path d="M14 15c2.6.3 4.5 2.3 4.5 5"/></svg>
                </span>
                <span class="person-chip-label">{% trans "All" %}</span>
            </a>
            {% for person in managed_people %}
                <a class="person-chip {% if not scope_everyone and person == scope_person %}person-chip-active{% endif %}" href="?as={{ person.pk }}">
                    <span class="person-chip-avatar">{{ person.first_name|slice:":1" }}</span>
                    <span class="person-chip-label">{% if person == me %}{% trans "Me" %}{% else %}{{ person.first_name }}{% endif %}</span>
                </a>
            {% endfor %}
        </div>
    {% endif %}

    {% if managed_people %}
        {% if hero_attendance %}
            <div class="m-card-dark overflow-hidden">
                <div class="p-4 pb-0">
                    <p class="font-display text-xs font-extrabold text-info uppercase tracking-wide">{% blocktrans with date=hero_attendance.event.start|date:"D d M" %}Next up &middot; {{ date }}{% endblocktrans %}</p>
                    <p class="mt-1 font-display text-2xl leading-none font-extrabold uppercase">{{ hero_attendance.event.title }}</p>
                </div>
                <div class="p-4">
                    <div class="flex flex-wrap gap-4 font-mono text-xs text-on-dark">
                        <span>{% blocktrans with time=hero_attendance.event.start|date:"H:i" %}{{ time }} face-off{% endblocktrans %}</span>
                        {% if hero_attendance.event.gathering %}
                            <span>{% blocktrans with time=hero_attendance.event.gathering|date:"H:i" %}Meet {{ time }}{% endblocktrans %}</span>
                        {% endif %}
                        {% if hero_attendance.event.location %}<span>{{ hero_attendance.event.location.name }}</span>{% endif %}
                    </div>

                    {% if rsvp_closed %}
                        <p class="mt-3 font-display text-xs font-extrabold text-on-dark-dim uppercase tracking-wide">{% trans "Replies are closed for this event" %}</p>
                        <span class="pill pill-neutral mt-2">{{ hero_attendance.get_status_display }}</span>
                    {% else %}
                        <p class="mt-3 font-display text-xs font-extrabold text-on-dark-dim uppercase tracking-wide">{% blocktrans with name=hero_attendance.member.first_name %}{{ name }} &mdash; are you in?{% endblocktrans %}</p>
                        <div class="mt-2 flex gap-2">
                            <form class="flex-1" method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}">
                                {% csrf_token %}
                                <input type="hidden" name="member_id" value="{{ hero_attendance.member.pk }}">
                                <input type="hidden" name="status" value="present">
                                <button class="btn btn-positive w-full" type="submit">{% trans "In" %}</button>
                            </form>
                            <form class="flex-1" method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}">
                                {% csrf_token %}
                                <input type="hidden" name="member_id" value="{{ hero_attendance.member.pk }}">
                                <input type="hidden" name="status" value="absent">
                                <button class="btn w-full bg-steel text-on-dark" type="submit">{% trans "Out" %}</button>
                            </form>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        {% if needs_answer %}
            <div class="m-card p-4">
                <div class="flex items-center justify-between">
                    <span class="font-display text-xs font-extrabold text-muted uppercase tracking-wide">{% trans "Needs your answer" %}</span>
                    <span class="font-display text-lg font-extrabold text-club">{{ needs_answer|length|add:needs_answer_remaining }}</span>
                </div>
                <div class="mt-3 flex flex-col gap-2.5">
                    {% for attendance in needs_answer %}
                        {% if not forloop.first %}<div class="h-px bg-rule"></div>{% endif %}
                        <a class="flex items-center gap-3" href="{% url "mobile:event_detail" attendance.event.pk %}">
                            <div class="w-9.5 shrink-0 text-center">
                                <div class="font-display text-xl leading-none font-extrabold text-ink">{{ attendance.event.start|date:"d" }}</div>
                                <div class="font-mono text-[10px] text-muted uppercase tracking-wide">{{ attendance.event.start|date:"M" }}</div>
                            </div>
                            <div class="min-w-0 flex-1">
                                <div class="text-sm font-semibold text-ink">{{ attendance.event.title }}</div>
                                <div class="text-xs text-muted">{{ attendance.member.first_name }} &middot; {{ attendance.event.start|date:"H:i" }}</div>
                            </div>
                            <span class="pill pill-warn shrink-0">{% trans "Reply" %}</span>
                        </a>
                    {% endfor %}
                </div>
                {% if needs_answer_remaining %}
                    <a class="mt-3 block text-center text-xs font-semibold text-club" href="{% url "mobile:calendar" %}">
                        {% blocktrans count counter=needs_answer_remaining %}+{{ counter }} more in Calendar{% plural %}+{{ counter }} more in Calendar{% endblocktrans %}
                    </a>
                {% endif %}
            </div>
        {% endif %}

        {% if dues_rows %}
            <div class="flex flex-col gap-2.5">
                {% for row in dues_rows %}
                    <div class="m-card flex items-center gap-3 p-4">
                        <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-danger-bg">
                            <span class="font-display text-lg font-extrabold text-club">&euro;</span>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="text-sm font-semibold text-ink">{% blocktrans with name=row.membership.member.first_name %}Season dues &mdash; {{ name }}{% endblocktrans %}</div>
                            <div class="text-xs text-muted">
                                {% if row.invoice %}
                                    {% blocktrans with amount=row.balance|floatformat:2 due=row.invoice.due_date|date:"d M" %}&euro; {{ amount }} &middot; due {{ due }}{% endblocktrans %}
                                {% else %}
                                    {% blocktrans with amount=row.balance|floatformat:2 %}&euro; {{ amount }}{% endblocktrans %}
                                {% endif %}
                            </div>
                        </div>
                        <span class="btn btn-dark shrink-0">{% trans "Pay" %}</span>
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        {% if news_items %}
            <div>
                <div class="mb-2.5 flex items-baseline justify-between">
                    <span class="font-display text-xs font-extrabold text-muted uppercase tracking-wide">{% trans "Club news" %}</span>
                    <a class="text-xs font-semibold text-club" href="{% url "mobile:news_list" %}">{% trans "All news" %}</a>
                </div>
                {% with lead=news_items.0 %}
                    <a class="m-card block overflow-hidden" href="{% url "mobile:news_detail" lead.slug %}">
                        <div class="flex h-[104px] items-center justify-center bg-line text-xs text-dim">{% trans "News photo" %}</div>
                        <div class="p-3.5">
                            <div class="font-display text-[11px] font-extrabold text-club uppercase tracking-wide">
                                {% with team=lead.teams.first %}{% if team %}{{ team.name }}{% else %}{% trans "Club news" %}{% endif %}{% endwith %} &middot; {{ lead.published_at|date:"d M" }}
                            </div>
                            <div class="mt-1 font-display text-xl leading-tight font-extrabold text-ink uppercase">{{ lead.title }}</div>
                        </div>
                    </a>
                {% endwith %}
                {% if news_items|length > 1 %}
                    <div class="m-card mt-2.5 overflow-hidden">
                        {% for item in news_items|slice:"1:" %}
                            {% if not forloop.first %}<div class="h-px bg-rule"></div>{% endif %}
                            <a class="block p-3.5" href="{% url "mobile:news_detail" item.slug %}">
                                <div class="font-display text-[11px] font-extrabold text-club uppercase tracking-wide">
                                    {% with team=item.teams.first %}{% if team %}{{ team.name }}{% else %}{% trans "Club news" %}{% endif %}{% endwith %} &middot; {{ item.published_at|date:"d M" }}
                                </div>
                                <div class="text-sm font-semibold text-ink">{{ item.title }}</div>
                            </a>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% endif %}

        {% if not hero_attendance and not needs_answer and not dues_rows and not news_items %}
            <div class="m-card p-6 text-center">
                <p class="text-sm text-muted">{% trans "Nothing to show right now." %}</p>
            </div>
        {% endif %}
    {% else %}
        <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 and updates will show up here." %}</p>
        </div>
    {% endif %}

    {% if sponsors %}
        <div>
            <div class="mb-2.5 font-display text-xs font-extrabold text-muted uppercase tracking-wide">{% trans "Sponsors" %}</div>
            <div class="scrollbar-hide flex gap-3 overflow-x-auto pb-0.5">
                {% for sponsor in sponsors %}
                    {% if sponsor.url %}
                        <a class="m-card flex h-14 w-28 shrink-0 items-center justify-center p-2" href="{{ sponsor.url }}" target="_blank" rel="noopener">
                            {% if sponsor.logo %}<img class="max-h-full max-w-full object-contain" src="{{ sponsor.logo.url }}" alt="{{ sponsor.name }}">{% else %}<span class="text-xs font-semibold text-muted">{{ sponsor.name }}</span>{% endif %}
                        </a>
                    {% else %}
                        <div class="m-card flex h-14 w-28 shrink-0 items-center justify-center p-2">
                            {% if sponsor.logo %}<img class="max-h-full max-w-full object-contain" src="{{ sponsor.logo.url }}" alt="{{ sponsor.name }}">{% else %}<span class="text-xs font-semibold text-muted">{{ sponsor.name }}</span>{% endif %}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    {% endif %}
{% endblock content %}