@model PlanTempus.Application.Features.Customers.Components.CustomerDetailAppointmentsViewModel

<swp-detail-grid>
    <!-- Left Column -->
    <swp-card-column>
        <!-- Kommende aftaler -->
        <swp-card>
            <swp-card-header>
                <swp-card-title>@Model.UpcomingTitle</swp-card-title>
            </swp-card-header>
            @foreach (var appointment in Model.Upcoming)
            {
                <swp-appointment-card>
                    <swp-appointment-date>
                        @appointment.FormattedDate
                    </swp-appointment-date>
                    <swp-appointment-details>
                        @appointment.Details
                    </swp-appointment-details>
                    <swp-appointment-actions>
                        <swp-btn class="secondary">@Model.MoveButtonText</swp-btn>
                        <swp-btn class="secondary">@Model.CancelButtonText</swp-btn>
                    </swp-appointment-actions>
                </swp-appointment-card>
            }
            @if (!Model.Upcoming.Any())
            {
                <swp-empty-state>
                    <p>Ingen kommende aftaler</p>
                </swp-empty-state>
            }
        </swp-card>
    </swp-card-column>

    <!-- Right Column -->
    <swp-card-column>
        <!-- Tidligere aftaler -->
        <swp-card>
            <swp-card-header>
                <swp-card-title>@Model.HistoryTitle</swp-card-title>
            </swp-card-header>
            <swp-table>
                <swp-table-header>
                    <span>@Model.DateHeader</span>
                    <span>@Model.ServiceHeader</span>
                    <span>@Model.HairdresserHeader</span>
                    <span>@Model.DurationHeader</span>
                    <span>@Model.PriceHeader</span>
                </swp-table-header>
                @foreach (var appointment in Model.History)
                {
                    <swp-table-row>
                        <span>@appointment.FormattedDate</span>
                        <span>@appointment.Service</span>
                        <span>@appointment.Hairdresser</span>
                        <span>@appointment.Duration</span>
                        <span class="mono">@appointment.FormattedPrice</span>
                    </swp-table-row>
                }
            </swp-table>
            <swp-see-all>@Model.SeeAllText</swp-see-all>
        </swp-card>
    </swp-card-column>
</swp-detail-grid>