@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
{
    <p class="intro">
        Alle Termine des Elternbeirats auf einen Blick. Sie können den Kalender auch
        <a href="/events.ics">abonnieren</a> und in Ihrer Kalender-App automatisch
        aktuell halten.
    </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)
            {
                <li>
                    <a class="card-link" href="/events">
                        <span class="event-title">@ev.Title</span>
                        <EventDate Value="ev" />
                        @if (!string.IsNullOrWhiteSpace(ev.Location))
                        {
                            <span class="event-location">@ev.Location</span>
                        }
                        @if (!string.IsNullOrWhiteSpace(ev.Note))
                        {
                            <p class="event-note">@ev.Note</p>
                        }
                    </a>
                </li>
            }
        </ul>
    }

    @if (_pastEvents.Count > 0)
    {
        <h2>Vergangene Termine</h2>
        <ul class="event-list event-list-past">
            @foreach (var ev in _pastEvents)
            {
                <li>
                    <a class="card-link" href="/events">
                        <span class="event-title">@ev.Title</span>
                        <EventDate Value="ev" />
                        @if (!string.IsNullOrWhiteSpace(ev.Location))
                        {
                            <span class="event-location">@ev.Location</span>
                        }
                    </a>
                </li>
            }
        </ul>
    }
}