@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)
        {
            @* As in EventCard: the calendar sheet shows the date and is hidden from
               screen readers, who get the full date from <EventDate> instead. Visible
               beside the sheet is only what it cannot show: the time, the end. *@
            var span = EventDateFormat.Span(_nextEvent);
            <a class="next-event" href="/events">
                <span class="next-event-label">Nächster Termin</span>
                <span class="next-event-row">
                    <CalendarSheet Value="_nextEvent.Start" />
                    <span class="next-event-details">
                        <span class="next-event-title">@_nextEvent.Title</span>
                        <span class="visually-hidden"><EventDate Value="_nextEvent" /></span>
                        @if (span.Length > 0)
                        {
                            <span class="next-event-meta"><Icon Name="clock" Size="16" /> @span</span>
                        }
                        @if (!string.IsNullOrWhiteSpace(_nextEvent.Location))
                        {
                            <span class="next-event-meta"><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>