@page "/kunder/{id}"
@model PlanTempus.Application.Features.Customers.Pages.DetailModel
@{
    ViewData["Title"] = "Kundedetaljer - Sofie Nielsen";
}

<swp-sticky-header>
    <swp-header-content>
        <swp-page-header>
            <swp-back-link href="/kunder">
                <i class="ph ph-arrow-left"></i>
                <span>Tilbage til kunder</span>
            </swp-back-link>
            <swp-page-actions>
                <swp-btn class="secondary">
                    <i class="ph ph-trash"></i>
                    <span localize="customers.detail.delete">Slet kunde</span>
                </swp-btn>
                <swp-btn class="primary">
                    <i class="ph ph-floppy-disk"></i>
                    <span localize="customers.detail.save">Gem</span>
                </swp-btn>
            </swp-page-actions>
        </swp-page-header>

        <swp-customer-detail-header>
            <swp-customer-avatar-large>SN</swp-customer-avatar-large>
            <swp-customer-detail-info>
                <swp-customer-name-row>
                    <swp-customer-detail-name>Sofie Nielsen</swp-customer-detail-name>
                    <swp-customer-detail-tags>
                        <swp-tag class="vip">VIP</swp-tag>
                    </swp-customer-detail-tags>
                    <swp-booking-exclusion data-excluded="false">
                        <i class="ph ph-check icon"></i>
                        <span>Booking tilladt</span>
                    </swp-booking-exclusion>
                </swp-customer-name-row>
                <swp-contact-line>
                    <a href="tel:+4523456789">+45 23 45 67 89</a>
                    <span class="separator">|</span>
                    <a href="mailto:sofie@email.dk">sofie@email.dk</a>
                    <span class="separator">|</span>
                    <span>Kunde siden marts 2024</span>
                </swp-contact-line>
                <swp-fact-boxes-inline>
                    <swp-fact-inline>
                        <swp-fact-inline-value>14</swp-fact-inline-value>
                        <swp-fact-inline-label>besog</swp-fact-inline-label>
                    </swp-fact-inline>
                    <swp-fact-inline>
                        <swp-fact-inline-value>32</swp-fact-inline-value>
                        <swp-fact-inline-label>dage interval</swp-fact-inline-label>
                    </swp-fact-inline>
                    <swp-fact-inline>
                        <swp-fact-inline-value>Emma L.</swp-fact-inline-value>
                        <swp-fact-inline-label>foretrukken frisør</swp-fact-inline-label>
                    </swp-fact-inline>
                    <swp-fact-inline>
                        <swp-fact-inline-value>12.450 kr</swp-fact-inline-value>
                        <swp-fact-inline-label>total omsætning</swp-fact-inline-label>
                    </swp-fact-inline>
                </swp-fact-boxes-inline>
            </swp-customer-detail-info>
        </swp-customer-detail-header>
    </swp-header-content>

    <swp-tab-bar>
        <swp-tab class="active" data-tab="overview">Oversigt</swp-tab>
        <swp-tab data-tab="economy">Økonomi</swp-tab>
        <swp-tab data-tab="statistics">Statistik</swp-tab>
        <swp-tab data-tab="journal">Journal</swp-tab>
        <swp-tab data-tab="appointments">Aftaler</swp-tab>
        <swp-tab data-tab="giftcards">Gavekort</swp-tab>
        <swp-tab data-tab="activity" localize="customers.detail.tabs.activitylog">Aktivitetslog</swp-tab>
    </swp-tab-bar>
</swp-sticky-header>

<!-- OVERSIGT TAB -->
<swp-tab-content class="active" data-tab="overview">
    <swp-page-container>
        <swp-detail-grid>
            <!-- Left Column -->
            <swp-card-column>
                <!-- Kontaktoplysninger -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>
                            <i class="ph ph-address-book"></i>
                            <span localize="customers.detail.contactInfo">Kontaktoplysninger</span>
                        </swp-card-title>
                    </swp-card-header>
                    <swp-edit-section>
                        <swp-edit-row>
                            <swp-edit-label localize="customers.detail.phone">Telefon</swp-edit-label>
                            <swp-edit-value contenteditable="true">+45 23 45 67 89</swp-edit-value>
                        </swp-edit-row>
                        <swp-edit-row>
                            <swp-edit-label localize="customers.detail.email">Email</swp-edit-label>
                            <swp-edit-value contenteditable="true">sofie@email.dk</swp-edit-value>
                        </swp-edit-row>
                        <swp-edit-row>
                            <swp-edit-label localize="customers.detail.address">Adresse</swp-edit-label>
                            <swp-edit-value contenteditable="true">Hovedgaden 12</swp-edit-value>
                        </swp-edit-row>
                        <swp-edit-row>
                            <swp-edit-label localize="customers.detail.zipCity">Postnr + By</swp-edit-label>
                            <swp-edit-value contenteditable="true">2100 København Ø</swp-edit-value>
                        </swp-edit-row>
                    </swp-edit-section>
                </swp-card>

                <!-- Profil -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>
                            <i class="ph ph-user-circle"></i>
                            <span localize="customers.detail.profile">Profil</span>
                        </swp-card-title>
                    </swp-card-header>
                    <swp-profile-boxes>
                        <swp-profile-box>
                            <swp-profile-box-label localize="customers.detail.hairType">Hårtype</swp-profile-box-label>
                            <swp-profile-box-value>Medium - Bolget</swp-profile-box-value>
                        </swp-profile-box>
                        <swp-profile-box>
                            <swp-profile-box-label localize="customers.detail.porosity">Porøsitet</swp-profile-box-label>
                            <swp-profile-box-value>Medium</swp-profile-box-value>
                        </swp-profile-box>
                        <swp-profile-box>
                            <swp-profile-box-label localize="customers.detail.scalp">Hovedbund</swp-profile-box-label>
                            <swp-profile-box-value>Normal</swp-profile-box-value>
                        </swp-profile-box>
                        <swp-profile-box>
                            <swp-profile-box-label localize="customers.detail.naturalColor">Naturlig farve</swp-profile-box-label>
                            <swp-profile-box-value>Mørkblond (6)</swp-profile-box-value>
                        </swp-profile-box>
                    </swp-profile-boxes>
                </swp-card>
            </swp-card-column>

            <!-- Right Column -->
            <swp-card-column>
                <!-- Marketing -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>
                            <i class="ph ph-megaphone"></i>
                            <span localize="customers.detail.marketing">Marketing</span>
                        </swp-card-title>
                    </swp-card-header>
                    <swp-toggle-row>
                        <swp-toggle-label localize="customers.detail.emailMarketing">Email marketing</swp-toggle-label>
                        <swp-toggle-slider data-value="yes">
                            <swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
                            <swp-toggle-option localize="common.no">Nej</swp-toggle-option>
                        </swp-toggle-slider>
                    </swp-toggle-row>
                    <swp-toggle-row>
                        <swp-toggle-label localize="customers.detail.smsMarketing">SMS marketing</swp-toggle-label>
                        <swp-toggle-slider data-value="no">
                            <swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
                            <swp-toggle-option localize="common.no">Nej</swp-toggle-option>
                        </swp-toggle-slider>
                    </swp-toggle-row>
                </swp-card>

                <!-- Betalingsindstillinger -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>
                            <i class="ph ph-credit-card"></i>
                            <span localize="customers.detail.paymentSettings">Betalingsindstillinger</span>
                        </swp-card-title>
                    </swp-card-header>
                    <swp-toggle-row>
                        <swp-toggle-info>
                            <swp-toggle-label localize="customers.detail.requirePrepayment">Kræv forudbetaling</swp-toggle-label>
                            <swp-toggle-desc>Kunden skal betale fuldt belob ved booking</swp-toggle-desc>
                        </swp-toggle-info>
                        <swp-toggle-slider data-value="no">
                            <swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
                            <swp-toggle-option localize="common.no">Nej</swp-toggle-option>
                        </swp-toggle-slider>
                    </swp-toggle-row>
                    <swp-toggle-row>
                        <swp-toggle-info>
                            <swp-toggle-label localize="customers.detail.allowPartialPayment">Tillad delvis betaling</swp-toggle-label>
                            <swp-toggle-desc>Kunden kan vaelge at betale et depositum</swp-toggle-desc>
                        </swp-toggle-info>
                        <swp-toggle-slider data-value="no">
                            <swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
                            <swp-toggle-option localize="common.no">Nej</swp-toggle-option>
                        </swp-toggle-slider>
                    </swp-toggle-row>
                </swp-card>

                <!-- Praeferencer -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>
                            <i class="ph ph-sliders-horizontal"></i>
                            <span localize="customers.detail.preferences">Præferencer</span>
                        </swp-card-title>
                    </swp-card-header>
                    <swp-profile-boxes>
                        <swp-profile-box>
                            <swp-profile-box-label localize="customers.detail.preferredHairdresser">Foretrukken frisør</swp-profile-box-label>
                            <swp-profile-box-value>Emma L.</swp-profile-box-value>
                        </swp-profile-box>
                        <swp-profile-box>
                            <swp-profile-box-label localize="customers.detail.preferredDay">Foretrukken dag</swp-profile-box-label>
                            <swp-profile-box-value>Tirsdag/Torsdag</swp-profile-box-value>
                        </swp-profile-box>
                        <swp-profile-box class="full-width">
                            <swp-profile-box-label localize="customers.detail.specialRequests">Specielle ønsker</swp-profile-box-label>
                            <swp-profile-box-value>Foretraekker kold tone, ikke for mørk</swp-profile-box-value>
                        </swp-profile-box>
                    </swp-profile-boxes>
                </swp-card>

                <!-- Advarsler -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>
                            <i class="ph ph-warning"></i>
                            <span localize="customers.detail.warnings">Advarsler</span>
                        </swp-card-title>
                    </swp-card-header>
                    <swp-profile-boxes>
                        <swp-profile-box class="warning full-width">
                            <swp-profile-box-label localize="customers.detail.allergies">Allergier / Følsomhed</swp-profile-box-label>
                            <swp-profile-box-value>Parfumeallergi - brug uparfumerede produkter</swp-profile-box-value>
                        </swp-profile-box>
                    </swp-profile-boxes>
                </swp-card>

                <!-- Kundegruppe & Relationer -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>
                            <i class="ph ph-users-three"></i>
                            <span localize="customers.detail.groupAndRelations">Kundegruppe & Relationer</span>
                        </swp-card-title>
                    </swp-card-header>
                    <swp-customer-group-row>
                        <swp-customer-group-label>Kundegruppe:</swp-customer-group-label>
                        <swp-select>
                            <button type="button">
                                <swp-select-value>Standard</swp-select-value>
                                <i class="ph ph-caret-down"></i>
                            </button>
                            <swp-select-dropdown>
                                <swp-select-option class="selected" data-value="standard">Standard</swp-select-option>
                                <swp-select-option data-value="premium">Premium</swp-select-option>
                                <swp-select-option data-value="erhverv">Erhverv</swp-select-option>
                                <swp-select-option data-value="medarbejder">Medarbejder</swp-select-option>
                                <swp-select-option data-value="familie">Familie & Venner</swp-select-option>
                            </swp-select-dropdown>
                        </swp-select>
                    </swp-customer-group-row>

                    <swp-relations-list>
                        <swp-relation-item>
                            <swp-relation-avatar>EN</swp-relation-avatar>
                            <swp-relation-info>
                                <swp-relation-name>Emil Nielsen</swp-relation-name>
                                <swp-relation-type>Barn</swp-relation-type>
                            </swp-relation-info>
                            <swp-relation-actions>
                                <swp-relation-link>Åbn</swp-relation-link>
                                <swp-relation-remove>&times;</swp-relation-remove>
                            </swp-relation-actions>
                        </swp-relation-item>

                        <swp-relation-item>
                            <swp-relation-avatar>LN</swp-relation-avatar>
                            <swp-relation-info>
                                <swp-relation-name>Luna Nielsen</swp-relation-name>
                                <swp-relation-type>Barn</swp-relation-type>
                            </swp-relation-info>
                            <swp-relation-actions>
                                <swp-relation-link>Åbn</swp-relation-link>
                                <swp-relation-remove>&times;</swp-relation-remove>
                            </swp-relation-actions>
                        </swp-relation-item>

                        <swp-add-relation>
                            <i class="ph ph-plus"></i>
                            <span>Tilføj relation</span>
                        </swp-add-relation>
                    </swp-relations-list>
                </swp-card>
            </swp-card-column>
        </swp-detail-grid>
    </swp-page-container>
</swp-tab-content>

<!-- Placeholder for other tabs -->
<swp-tab-content data-tab="economy">
    <swp-page-container>
        <swp-empty-state>
            <i class="ph ph-currency-circle-dollar"></i>
            <span>Økonomi tab - kommer snart</span>
        </swp-empty-state>
    </swp-page-container>
</swp-tab-content>

<swp-tab-content data-tab="statistics">
    <swp-page-container>
        <swp-detail-grid>
            <!-- Fremmøde & Pålidelighed - spans both columns -->
            <swp-card class="full-width">
                <swp-card-header>
                    <swp-card-title>Fremmøde & Pålidelighed</swp-card-title>
                </swp-card-header>
                <div class="grid-4">
                    <swp-stat-card class="highlight">
                        <swp-stat-value>47</swp-stat-value>
                        <swp-stat-label>Fremmøder</swp-stat-label>
                    </swp-stat-card>
                    <swp-stat-card class="warning">
                        <swp-stat-value>3</swp-stat-value>
                        <swp-stat-label>Aflysninger</swp-stat-label>
                    </swp-stat-card>
                    <swp-stat-card class="danger">
                        <swp-stat-value>1</swp-stat-value>
                        <swp-stat-label>No-shows</swp-stat-label>
                    </swp-stat-card>
                    <swp-stat-card class="success">
                        <swp-stat-value>92%</swp-stat-value>
                        <swp-stat-label>Pålidelighed</swp-stat-label>
                    </swp-stat-card>
                </div>
                <swp-attendance-bar>
                    <swp-attendance-segment class="attended" style="width: 92%;">47</swp-attendance-segment>
                    <swp-attendance-segment class="cancelled" style="width: 6%;">3</swp-attendance-segment>
                    <swp-attendance-segment class="noshow" style="width: 2%;">1</swp-attendance-segment>
                </swp-attendance-bar>
            </swp-card>

            <!-- Left Column -->
            <swp-card-column>
                <!-- Service-mønstre -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>Service-mønstre</swp-card-title>
                    </swp-card-header>
                    <div class="grid-2">
                        <div>
                            <swp-section-label class="small">Top 3 Services</swp-section-label>
                            <swp-top-list>
                                <swp-top-item>
                                    <swp-top-rank>1</swp-top-rank>
                                    <swp-top-name>Klip + Farve</swp-top-name>
                                    <swp-top-count>12×</swp-top-count>
                                </swp-top-item>
                                <swp-top-item>
                                    <swp-top-rank>2</swp-top-rank>
                                    <swp-top-name>Farve</swp-top-name>
                                    <swp-top-count>8×</swp-top-count>
                                </swp-top-item>
                                <swp-top-item>
                                    <swp-top-rank>3</swp-top-rank>
                                    <swp-top-name>Klip</swp-top-name>
                                    <swp-top-count>6×</swp-top-count>
                                </swp-top-item>
                            </swp-top-list>
                        </div>
                        <div>
                            <swp-section-label class="small">Top 3 Produkter</swp-section-label>
                            <swp-top-list>
                                <swp-top-item>
                                    <swp-top-rank>1</swp-top-rank>
                                    <swp-top-name>Olaplex No. 3</swp-top-name>
                                    <swp-top-count>5×</swp-top-count>
                                </swp-top-item>
                                <swp-top-item>
                                    <swp-top-rank>2</swp-top-rank>
                                    <swp-top-name>Shampoo</swp-top-name>
                                    <swp-top-count>3×</swp-top-count>
                                </swp-top-item>
                                <swp-top-item>
                                    <swp-top-rank>3</swp-top-rank>
                                    <swp-top-name>Hårkur</swp-top-name>
                                    <swp-top-count>2×</swp-top-count>
                                </swp-top-item>
                            </swp-top-list>
                        </div>
                    </div>
                </swp-card>
            </swp-card-column>

            <!-- Right Column -->
            <swp-card-column>
                <!-- Booking-adfærd -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>Booking-adfærd</swp-card-title>
                    </swp-card-header>
                    <swp-kv-list>
                        <swp-kv-row>
                            <swp-kv-label>Gns. bookingvarsel</swp-kv-label>
                            <swp-kv-value>5 dage</swp-kv-value>
                        </swp-kv-row>
                        <swp-kv-row>
                            <swp-kv-label>Foretrukken dag</swp-kv-label>
                            <swp-kv-value>Tirsdag</swp-kv-value>
                        </swp-kv-row>
                        <swp-kv-row>
                            <swp-kv-label>Foretrukken tid</swp-kv-label>
                            <swp-kv-value>10:00 - 12:00</swp-kv-value>
                        </swp-kv-row>
                        <swp-kv-row>
                            <swp-kv-label>Online booking rate</swp-kv-label>
                            <swp-kv-value>78%</swp-kv-value>
                        </swp-kv-row>
                        <swp-kv-row>
                            <swp-kv-label>Gns. aflysningsvarsel</swp-kv-label>
                            <swp-kv-value>2 dage</swp-kv-value>
                        </swp-kv-row>
                    </swp-kv-list>
                </swp-card>

                <!-- Loyalitet -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>Loyalitet</swp-card-title>
                    </swp-card-header>
                    <div class="grid-2 compact">
                        <swp-stat-card>
                            <swp-stat-value class="small">1,8 år</swp-stat-value>
                            <swp-stat-label>Kunde siden</swp-stat-label>
                        </swp-stat-card>
                        <swp-stat-card class="success">
                            <swp-stat-value class="small">13</swp-stat-value>
                            <swp-stat-label>Dage siden sidst</swp-stat-label>
                        </swp-stat-card>
                        <swp-stat-card>
                            <swp-stat-value class="small">
                                <swp-risk-indicator class="low">
                                    <swp-risk-dot></swp-risk-dot>
                                    <span>Lav</span>
                                </swp-risk-indicator>
                            </swp-stat-value>
                            <swp-stat-label>Churn-risiko</swp-stat-label>
                        </swp-stat-card>
                        <swp-stat-card>
                            <swp-stat-value class="small">32 dage</swp-stat-value>
                            <swp-stat-label>Gns. interval</swp-stat-label>
                        </swp-stat-card>
                    </div>
                </swp-card>
            </swp-card-column>
        </swp-detail-grid>
    </swp-page-container>
</swp-tab-content>

<swp-tab-content data-tab="journal">
    <swp-page-container>
        <!-- Mini Tabs for quick filter -->
        <swp-journal-mini-tabs>
            <swp-journal-mini-tab class="active">
                <span class="tab-dot blue"></span>
                Alle
                <span class="tab-count">5</span>
            </swp-journal-mini-tab>
            <swp-journal-mini-tab>
                <span class="tab-dot blue"></span>
                Noter
                <span class="tab-count">2</span>
            </swp-journal-mini-tab>
            <swp-journal-mini-tab>
                <span class="tab-dot amber"></span>
                Farveformler
                <span class="tab-count">2</span>
            </swp-journal-mini-tab>
            <swp-journal-mini-tab>
                <span class="tab-dot purple"></span>
                Analyser
                <span class="tab-count">1</span>
            </swp-journal-mini-tab>
        </swp-journal-mini-tabs>

        <swp-detail-grid>
            <!-- Left Column -->
            <swp-card-column>
                <!-- Noter header card -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>
                            <span class="col-dot blue"></span>
                            <span>Noter</span>
                        </swp-card-title>
                        <swp-section-action>+ Tilføj note</swp-section-action>
                    </swp-card-header>
                    <swp-journal-entry>
                        <swp-journal-entry-header>
                            <swp-journal-entry-type class="note">Note</swp-journal-entry-type>
                            <swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
                        </swp-journal-entry-header>
                        <swp-journal-entry-body>
                            Kunden foretrækker naturlige farver og ønsker lidt ekstra tid til konsultation. Husk at tjekke allergistatus inden farvebehandling.
                        </swp-journal-entry-body>
                        <swp-journal-entry-footer>
                            <swp-journal-entry-date>9. dec 2025 · Af: Emma</swp-journal-entry-date>
                            <swp-journal-entry-visibility>
                                <i class="ph ph-eye"></i>
                                <span>Alle</span>
                            </swp-journal-entry-visibility>
                        </swp-journal-entry-footer>
                    </swp-journal-entry>
                </swp-card>

                <!-- Advarsel note card -->
                <swp-card>
                    <swp-journal-entry>
                        <swp-journal-entry-header>
                            <swp-journal-entry-type class="advarsel">Advarsel</swp-journal-entry-type>
                            <swp-journal-entry-tags>
                                <swp-journal-tag class="allergi">Allergi</swp-journal-tag>
                            </swp-journal-entry-tags>
                            <swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
                        </swp-journal-entry-header>
                        <swp-journal-entry-body>
                            <strong>PARFUMEALLERGI</strong> — Brug kun uparfumerede produkter. Havde reaktion på standard shampoo ved første besøg.
                        </swp-journal-entry-body>
                        <swp-journal-entry-footer>
                            <swp-journal-entry-date>15. mar 2024 · Af: Nina</swp-journal-entry-date>
                            <swp-journal-entry-visibility class="warning">
                                <i class="ph ph-warning"></i>
                                <span>Advarsel</span>
                            </swp-journal-entry-visibility>
                        </swp-journal-entry-footer>
                    </swp-journal-entry>
                </swp-card>

                <!-- Farveformler card -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>
                            <span class="col-dot amber"></span>
                            <span>Farveformler</span>
                        </swp-card-title>
                        <swp-section-action>+ Tilføj</swp-section-action>
                    </swp-card-header>
                    <swp-journal-entry>
                        <swp-journal-entry-header>
                            <swp-journal-entry-type class="farveformel">Farveformel</swp-journal-entry-type>
                            <swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
                        </swp-journal-entry-header>
                        <swp-journal-entry-body>
                            <span class="label">Måltone:</span> Kold<br>
                            <span class="label">Oxidant:</span> <span class="mono">6%</span><br>
                            <span class="label">Formel:</span> <span class="mono">7/1 + 7/0 (1:1)</span><br>
                            <span class="label">Virketid:</span> <span class="mono">35 min</span><br>
                            <span class="label">Placering:</span> Hele håret<br><br>
                            Resultat: Flot ensartet farve, kunden meget tilfreds
                        </swp-journal-entry-body>
                        <swp-journal-entry-footer>
                            <swp-journal-entry-date>12. nov 2025 · Af: Emma</swp-journal-entry-date>
                        </swp-journal-entry-footer>
                    </swp-journal-entry>
                </swp-card>
            </swp-card-column>

            <!-- Right Column -->
            <swp-card-column>
                <!-- Analyser card -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>
                            <span class="col-dot purple"></span>
                            <span>Analyser</span>
                        </swp-card-title>
                        <swp-section-action>+ Tilføj</swp-section-action>
                    </swp-card-header>
                    <swp-journal-entry>
                        <swp-journal-entry-header>
                            <swp-journal-entry-type class="analyse">Håranalyse</swp-journal-entry-type>
                            <swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
                        </swp-journal-entry-header>
                        <swp-journal-entry-body>
                            <span class="label">Tilstand:</span> God, let tørt i spidserne<br>
                            <span class="label">Porøsitet:</span> Medium<br>
                            <span class="label">Elasticitet:</span> Normal<br><br>
                            Anbefaling: Olaplex behandling hver 6. uge
                        </swp-journal-entry-body>
                        <swp-journal-entry-footer>
                            <swp-journal-entry-date>1. okt 2025 · Af: Maria</swp-journal-entry-date>
                        </swp-journal-entry-footer>
                    </swp-journal-entry>
                </swp-card>
            </swp-card-column>
        </swp-detail-grid>
    </swp-page-container>
</swp-tab-content>

<swp-tab-content data-tab="appointments">
    <swp-page-container>
        <swp-detail-grid>
            <!-- Left Column -->
            <swp-card-column>
                <!-- Kommende aftaler -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>Kommende aftaler</swp-card-title>
                    </swp-card-header>
                    <swp-appointment-card>
                        <swp-appointment-date>
                            Tirsdag 14. januar 2026 kl. 10:00
                        </swp-appointment-date>
                        <swp-appointment-details>
                            Klip + Farve · Emma L. · 2 timer
                        </swp-appointment-details>
                        <swp-appointment-actions>
                            <swp-btn class="secondary">Flyt</swp-btn>
                            <swp-btn class="secondary">Aflys</swp-btn>
                        </swp-appointment-actions>
                    </swp-appointment-card>
                </swp-card>
            </swp-card-column>

            <!-- Right Column -->
            <swp-card-column>
                <!-- Tidligere aftaler -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>Tidligere aftaler</swp-card-title>
                    </swp-card-header>
                    <swp-table>
                        <swp-table-header>
                            <span>Dato</span>
                            <span>Service</span>
                            <span>Frisør</span>
                            <span>Varighed</span>
                            <span>Pris</span>
                        </swp-table-header>
                        <swp-table-row>
                            <span>9. dec 2025</span>
                            <span>Klip + Farve</span>
                            <span>Emma L.</span>
                            <span>2 timer</span>
                            <span class="mono">1.450 kr</span>
                        </swp-table-row>
                        <swp-table-row>
                            <span>12. nov 2025</span>
                            <span>Farve</span>
                            <span>Emma L.</span>
                            <span>1t 30m</span>
                            <span class="mono">1.200 kr</span>
                        </swp-table-row>
                        <swp-table-row>
                            <span>15. okt 2025</span>
                            <span>Klip</span>
                            <span>Emma L.</span>
                            <span>45 min</span>
                            <span class="mono">550 kr</span>
                        </swp-table-row>
                        <swp-table-row>
                            <span>20. sep 2025</span>
                            <span>Klip + Behandling</span>
                            <span>Nina K.</span>
                            <span>1t 15m</span>
                            <span class="mono">750 kr</span>
                        </swp-table-row>
                        <swp-table-row>
                            <span>15. aug 2025</span>
                            <span>Farve + Klip</span>
                            <span>Emma L.</span>
                            <span>2t 15m</span>
                            <span class="mono">1.600 kr</span>
                        </swp-table-row>
                    </swp-table>
                    <swp-see-all>Se alle aftaler →</swp-see-all>
                </swp-card>
            </swp-card-column>
        </swp-detail-grid>
    </swp-page-container>
</swp-tab-content>

<swp-tab-content data-tab="giftcards">
    <swp-page-container>
        <swp-detail-grid>
            <!-- Left Column -->
            <swp-card-column>
                <!-- Aktive gavekort -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>Aktive gavekort</swp-card-title>
                    </swp-card-header>
                    <swp-giftcard>
                        <swp-giftcard-header>
                            Gavekort #GK-2024-0892
                        </swp-giftcard-header>
                        <swp-giftcard-balance>
                            Saldo: <strong>350 kr</strong> (af 500 kr)
                        </swp-giftcard-balance>
                        <swp-progress-bar>
                            <swp-progress-fill style="width: 70%;"></swp-progress-fill>
                        </swp-progress-bar>
                        <swp-giftcard-expires>Udløber: 15. marts 2026</swp-giftcard-expires>
                    </swp-giftcard>
                </swp-card>

                <!-- Klippekort -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>Klippekort</swp-card-title>
                    </swp-card-header>
                    <swp-giftcard>
                        <swp-giftcard-header>
                            10-klip kort
                        </swp-giftcard-header>
                        <swp-giftcard-balance>
                            Brugt: <strong>7 af 10</strong> klip
                        </swp-giftcard-balance>
                        <swp-progress-bar>
                            <swp-progress-fill style="width: 70%;"></swp-progress-fill>
                        </swp-progress-bar>
                        <swp-giftcard-expires>Udløber aldrig</swp-giftcard-expires>
                    </swp-giftcard>
                </swp-card>
            </swp-card-column>

            <!-- Right Column -->
            <swp-card-column>
                <!-- Udløbne / Brugte -->
                <swp-card>
                    <swp-card-header>
                        <swp-card-title>Udløbne / Brugte</swp-card-title>
                    </swp-card-header>
                    <swp-empty-state>
                        <p>Ingen udløbne eller brugte kort</p>
                    </swp-empty-state>
                </swp-card>
            </swp-card-column>
        </swp-detail-grid>
    </swp-page-container>
</swp-tab-content>

<swp-tab-content data-tab="activity">
    <swp-page-container>
        <!-- Filters -->
        <swp-activity-filters>
            <swp-activity-filter class="active">Alle</swp-activity-filter>
            <swp-activity-filter><i class="ph ph-calendar"></i> Bookinger</swp-activity-filter>
            <swp-activity-filter><i class="ph ph-envelope"></i> Kommunikation</swp-activity-filter>
            <swp-activity-filter><i class="ph ph-pencil-simple"></i> Ændringer</swp-activity-filter>
            <swp-activity-filter><i class="ph ph-credit-card"></i> Betalinger</swp-activity-filter>
            <swp-activity-filter><i class="ph ph-key"></i> Login</swp-activity-filter>
        </swp-activity-filters>

        <swp-card>
            <swp-activity-timeline>
                <!-- I dag -->
                <swp-activity-date-group>
                    <swp-activity-date-header>I dag</swp-activity-date-header>

                    <swp-activity-item>
                        <swp-activity-icon class="communication"><i class="ph ph-chat-text"></i></swp-activity-icon>
                        <swp-activity-content>
                            <swp-activity-title>
                                <strong>SMS påmindelse</strong> sendt om aftale i morgen
                                <swp-activity-badge class="auto">Auto</swp-activity-badge>
                            </swp-activity-title>
                            <swp-activity-meta>
                                <swp-activity-time>14:00</swp-activity-time>
                                <swp-activity-actor>System</swp-activity-actor>
                            </swp-activity-meta>
                        </swp-activity-content>
                    </swp-activity-item>

                    <swp-activity-item>
                        <swp-activity-icon class="customer"><i class="ph ph-key"></i></swp-activity-icon>
                        <swp-activity-content>
                            <swp-activity-title>
                                Kunde <strong>loggede ind</strong> via online booking
                                <swp-activity-badge class="online">Online</swp-activity-badge>
                            </swp-activity-title>
                            <swp-activity-meta>
                                <swp-activity-time>09:15</swp-activity-time>
                            </swp-activity-meta>
                        </swp-activity-content>
                    </swp-activity-item>
                </swp-activity-date-group>

                <!-- 9. december 2025 -->
                <swp-activity-date-group>
                    <swp-activity-date-header>9. december 2025</swp-activity-date-header>

                    <swp-activity-item>
                        <swp-activity-icon class="booking"><i class="ph ph-check-circle"></i></swp-activity-icon>
                        <swp-activity-content>
                            <swp-activity-title>
                                <strong>Booking gennemført</strong>
                            </swp-activity-title>
                            <swp-activity-meta>
                                <swp-activity-time>12:30</swp-activity-time>
                                <swp-activity-actor>Farve + Behandling · Emma L.</swp-activity-actor>
                            </swp-activity-meta>
                        </swp-activity-content>
                    </swp-activity-item>

                    <swp-activity-item>
                        <swp-activity-icon class="edit"><i class="ph ph-note-pencil"></i></swp-activity-icon>
                        <swp-activity-content>
                            <swp-activity-title>
                                <strong>Note tilføjet</strong> — Farveformel opdateret
                            </swp-activity-title>
                            <swp-activity-meta>
                                <swp-activity-time>12:45</swp-activity-time>
                                <swp-activity-actor>Emma L.</swp-activity-actor>
                            </swp-activity-meta>
                        </swp-activity-content>
                    </swp-activity-item>
                </swp-activity-date-group>

                <!-- 15. november 2025 -->
                <swp-activity-date-group>
                    <swp-activity-date-header>15. november 2025</swp-activity-date-header>

                    <swp-activity-item>
                        <swp-activity-icon class="warning"><i class="ph ph-warning"></i></swp-activity-icon>
                        <swp-activity-content>
                            <swp-activity-title>
                                <strong>Allergi registreret</strong> — Parfumeallergi tilføjet til profil
                            </swp-activity-title>
                            <swp-activity-meta>
                                <swp-activity-time>10:00</swp-activity-time>
                                <swp-activity-actor>Nina K.</swp-activity-actor>
                            </swp-activity-meta>
                        </swp-activity-content>
                    </swp-activity-item>
                </swp-activity-date-group>

                <!-- 1. marts 2024 -->
                <swp-activity-date-group>
                    <swp-activity-date-header>1. marts 2024</swp-activity-date-header>

                    <swp-activity-item>
                        <swp-activity-icon class="customer"><i class="ph ph-user-plus"></i></swp-activity-icon>
                        <swp-activity-content>
                            <swp-activity-title>
                                <strong>Kunde oprettet</strong> via online booking
                            </swp-activity-title>
                            <swp-activity-meta>
                                <swp-activity-time>14:22</swp-activity-time>
                                <swp-activity-actor>System</swp-activity-actor>
                            </swp-activity-meta>
                        </swp-activity-content>
                    </swp-activity-item>
                </swp-activity-date-group>
            </swp-activity-timeline>
        </swp-card>
    </swp-page-container>
</swp-tab-content>

@section Scripts {
    <script>
        // Tab switching
        document.querySelectorAll('swp-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                const tabName = tab.dataset.tab;

                // Update tab active state
                document.querySelectorAll('swp-tab').forEach(t => t.classList.remove('active'));
                tab.classList.add('active');

                // Update content visibility
                document.querySelectorAll('swp-tab-content').forEach(content => {
                    content.classList.remove('active');
                    if (content.dataset.tab === tabName) {
                        content.classList.add('active');
                    }
                });
            });
        });

        // Booking exclusion toggle (feature-specific)
        const bookingExclusion = document.querySelector('swp-booking-exclusion');
        if (bookingExclusion) {
            bookingExclusion.addEventListener('click', () => {
                const isExcluded = bookingExclusion.dataset.excluded === 'true';
                bookingExclusion.dataset.excluded = isExcluded ? 'false' : 'true';
                const icon = bookingExclusion.querySelector('.icon');
                const text = bookingExclusion.querySelector('span:not(.icon)');
                if (isExcluded) {
                    icon.className = 'ph ph-check icon';
                    text.textContent = 'Booking tilladt';
                } else {
                    icon.className = 'ph ph-x icon';
                    text.textContent = 'Booking blokeret';
                }
            });
        }
    </script>
}