@page "/events"

@{
    // Heading and intro come from the "events" page record; fall back to a sensible
    // default only if that record is missing, so the page still renders.
    var title = _page?.Title ?? "Termine";
}

<PageTitle>@title</PageTitle>

<h1>@title</h1>

@if (_page is not null && !string.IsNullOrWhiteSpace(_page.Body))
{
    <article class="markdown-body">@Body</article>
}

@if (_unavailable)
{
    <p>Die Termine sind gerade nicht erreichbar. Bitte später erneut versuchen.</p>
}
else
{
    @* The page body above is the intro; the page only adds the subscribe button. *@
    <p class="events-subscribe">
        <a class="btn btn-secondary" href="/events.ics"><Icon Name="calendar-plus" Size="18" /> Kalender abonnieren</a>
    </p>

    <h2>Kommende Termine</h2>

    @if (_upcomingEvents.Count == 0)
    {
        <p>Zurzeit sind keine Termine geplant.</p>
    }
    else
    {
        <ul class="event-list">
            @foreach (var ev in _upcomingEvents)
            {
                @* No Href: a card linking to this very page would lead nowhere. *@
                <li><EventCard Value="ev" /></li>
            }
        </ul>
    }

    @* Past events matter rarely, so they wait folded up and compact: grouped by year,
       then day, title and (if the event has one) the time per row. *@
    @if (_pastEvents.Count > 0)
    {
        <details class="past-events disclosure">
            <summary>Vergangene Termine anzeigen (@_pastEvents.Count)</summary>
            @foreach (var year in PastYears)
            {
                <h3 class="past-events-year">@year.Key</h3>
                <ul>
                    @foreach (var ev in year)
                    {
                        var time = EventDateFormat.PastTime(ev);
                        <li>
                            <span class="past-event-date">@EventDateFormat.PastDays(ev)</span>
                            <span class="past-event-title">
                                @ev.Title
                                @if (time.Length > 0)
                                {
                                    <span class="past-event-time">@time</span>
                                }
                            </span>
                        </li>
                    }
                </ul>
            }
        </details>
    }
}