@page "/"
@using Elternbeirat.Web.Features.Events

<PageTitle>Elternbeirat der IGMH</PageTitle>

@* The hero spans the full window width (see Home.razor.css). Its text is the "home"
   page's body, taken apart by HomeIntro; the card beside it shows the next event. *@
<section class="hero">
    <div class="hero-inner">
        <div class="hero-text">
            <h1>@_intro.Title</h1>

            @if (_intro.IntroHtml.Length > 0)
            {
                <div class="hero-intro">@((MarkupString)_intro.IntroHtml)</div>
            }

            @if (_intro.Links.Count > 0)
            {
                <p class="hero-actions">
                    @for (var i = 0; i < _intro.Links.Count; i++)
                    {
                        var link = _intro.Links[i];
                        <a class="btn @(i == 0 ? "btn-primary" : "btn-secondary")" href="@link.Href">@link.Text</a>
                    }
                </p>
            }
        </div>

        @if (_nextEvent is not null)
        {
            @* The calendar sheet repeats the date as decoration, so it is hidden from
               screen readers; <EventDate> carries the full date for everyone. *@
            <a class="next-event" href="/events">
                <span class="next-event-label">Nächster Termin</span>
                <span class="next-event-row">
                    <span class="calendar-sheet" aria-hidden="true">
                        <span class="calendar-month">@NextEventMonth</span>
                        <span class="calendar-day">@NextEventDay</span>
                    </span>
                    <span class="next-event-details">
                        <span class="next-event-title">@_nextEvent.Title</span>
                        <EventDate Value="_nextEvent" />
                        @if (!string.IsNullOrWhiteSpace(_nextEvent.Location))
                        {
                            <span class="next-event-location"><Icon Name="map-pin" Size="16" /> @_nextEvent.Location</span>
                        }
                    </span>
                </span>
            </a>
        }
    </div>
</section>

@if (_tiles.Count > 0)
{
    <section class="home-tiles" aria-labelledby="home-tiles-title">
        <h2 id="home-tiles-title">Bereiche im Überblick</h2>
        <ul>
            @foreach (var tile in _tiles)
            {
                <li>
                    <a class="tile-link" href="@tile.Href">
                        <span class="tile-icon"><Icon Name="@tile.Icon" Size="24" /></span>
                        <span class="tile-title">@tile.Title</span>
                        @if (tile.Description.Length > 0)
                        {
                            <span class="tile-text">@tile.Description</span>
                        }
                    </a>
                </li>
            }
        </ul>
    </section>
}

<div class="home-embeds">
    <PageEmbeds Embed="_embed" />
</div>