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

<swp-detail-grid>
    <!-- Left Column -->
    <swp-card-column>
        <!-- Aktive gavekort -->
        @if (Model.Giftcards.Any())
        {
            <swp-card>
                <swp-card-header>
                    <swp-card-title>@Model.GiftcardsTitle</swp-card-title>
                </swp-card-header>
                @foreach (var giftcard in Model.Giftcards)
                {
                    <swp-giftcard>
                        <swp-giftcard-header>
                            @giftcard.Label
                        </swp-giftcard-header>
                        <swp-giftcard-balance>
                            @Html.Raw(giftcard.BalanceText)
                        </swp-giftcard-balance>
                        <swp-progress-bar>
                            <swp-progress-fill style="width: @giftcard.Percentage%;"></swp-progress-fill>
                        </swp-progress-bar>
                        <swp-giftcard-expires>@giftcard.ExpiresText</swp-giftcard-expires>
                    </swp-giftcard>
                }
            </swp-card>
        }

        <!-- Klippekort -->
        @if (Model.Punchcards.Any())
        {
            <swp-card>
                <swp-card-header>
                    <swp-card-title>@Model.PunchcardsTitle</swp-card-title>
                </swp-card-header>
                @foreach (var punchcard in Model.Punchcards)
                {
                    <swp-giftcard>
                        <swp-giftcard-header>
                            @punchcard.Label
                        </swp-giftcard-header>
                        <swp-giftcard-balance>
                            @Html.Raw(punchcard.BalanceText)
                        </swp-giftcard-balance>
                        <swp-progress-bar>
                            <swp-progress-fill style="width: @punchcard.Percentage%;"></swp-progress-fill>
                        </swp-progress-bar>
                        <swp-giftcard-expires>@punchcard.ExpiresText</swp-giftcard-expires>
                    </swp-giftcard>
                }
            </swp-card>
        }
    </swp-card-column>

    <!-- Right Column -->
    <swp-card-column>
        <!-- Udlobne / Brugte -->
        <swp-card>
            <swp-card-header>
                <swp-card-title>@Model.ExpiredTitle</swp-card-title>
            </swp-card-header>
            @if (Model.ExpiredCards.Any())
            {
                @foreach (var card in Model.ExpiredCards)
                {
                    <swp-giftcard class="expired">
                        <swp-giftcard-header>@card.Label</swp-giftcard-header>
                    </swp-giftcard>
                }
            }
            else
            {
                <swp-empty-state>
                    <p>@Model.NoExpiredText</p>
                </swp-empty-state>
            }
        </swp-card>
    </swp-card-column>
</swp-detail-grid>
