@*
    One event as a card: calendar sheet on the left, title, time, place and note on
    the right. With an Href the whole card is that link (home embed); without one it
    is a plain card (events page) and offers the event as a calendar file instead.
*@
@if (Href is null)
{
    <div class="event-card">@Details</div>
}
else
{
    <a class="event-card event-card-link" href="@Href">@Details</a>
}

@code {
    // The card's content, the same in both forms. A template, not a child component,
    // so the wrapper above stays the only difference between the two.
    private RenderFragment Details => @<text>
        <CalendarSheet Value="Value.Start" />
        <span class="event-details">
            <span class="event-title">@Value.Title</span>
            @* The sheet is hidden from screen readers; this is the date they hear. *@
            <span class="visually-hidden"><EventDate Value="Value" /></span>
            @if (Span.Length > 0)
            {
                <span class="event-meta"><Icon Name="clock" Size="16" /> @Span</span>
            }
            @if (!string.IsNullOrWhiteSpace(Value.Location))
            {
                <span class="event-meta"><Icon Name="map-pin" Size="16" /> @Value.Location</span>
            }
            @if (!string.IsNullOrWhiteSpace(Value.Note))
            {
                <span class="event-note">@Value.Note</span>
            }
            @* A link inside a link is invalid HTML, so only the plain card offers it. *@
            @if (Href is null)
            {
                <a class="event-ics" href="@IcsHref"><Icon Name="calendar-plus" Size="16" /> In Kalender übernehmen</a>
            }
        </span>
    </text>;
}