@model PlanTempus.Application.Features.Dashboard.Components.WaitlistItemViewModel

<swp-waitlist-item data-key="@Model.Key">
    <swp-waitlist-customer>
        <swp-avatar>@Model.CustomerInitials</swp-avatar>
        <swp-waitlist-customer-info>
            <swp-waitlist-name>@Model.CustomerName</swp-waitlist-name>
            <swp-waitlist-phone>@Model.CustomerPhone</swp-waitlist-phone>
        </swp-waitlist-customer-info>
    </swp-waitlist-customer>
    <swp-waitlist-service>@Model.Service</swp-waitlist-service>
    <swp-waitlist-meta>
        <swp-waitlist-periods>
            <swp-label>Ønsker:</swp-label>
            @foreach (var period in Model.PreferredPeriods)
            {
                <swp-waitlist-period-tag>@period</swp-waitlist-period-tag>
            }
        </swp-waitlist-periods>
        <swp-waitlist-dates>
            <swp-waitlist-date>
                <i class="ph ph-calendar"></i>
                Tilmeldt: @Model.RegisteredDate
            </swp-waitlist-date>
            <swp-waitlist-date class="expires @(Model.ExpiresSoon ? "soon" : "")">
                <i class="ph ph-clock"></i>
                Udløber: @Model.ExpiresDate
            </swp-waitlist-date>
        </swp-waitlist-dates>
    </swp-waitlist-meta>
    <swp-waitlist-actions>
        <swp-btn class="secondary">
            <i class="ph ph-phone"></i>
            Kontakt
        </swp-btn>
        <swp-btn class="primary">
            <i class="ph ph-calendar-plus"></i>
            Book
        </swp-btn>
    </swp-waitlist-actions>
</swp-waitlist-item>