PlanTempusApp/PlanTempus.Application/Features/Customers/Pages/Index.cshtml

@page "/kunder"
@model PlanTempus.Application.Features.Customers.Pages.IndexModel
@{
    ViewData["Title"] = "Kunder";
}

<swp-sticky-header>
    <swp-header-content>
        <swp-page-header>
            <swp-page-title>
                <h1 localize="customers.title">Kunder</h1>
                <p localize="customers.subtitle">Administrer kunder og kundekort</p>
            </swp-page-title>
        </swp-page-header>

        <swp-stats-row>
            <swp-stat-card class="highlight">
                <swp-stat-value>12</swp-stat-value>
                <swp-stat-label localize="customers.stats.total">Total kunder</swp-stat-label>
            </swp-stat-card>
            <swp-stat-card>
                <swp-stat-value>3</swp-stat-value>
                <swp-stat-label localize="customers.stats.newThisMonth">Nye denne måned</swp-stat-label>
            </swp-stat-card>
            <swp-stat-card>
                <swp-stat-value>12,4</swp-stat-value>
                <swp-stat-label localize="customers.stats.avgVisits">Gns. besøg</swp-stat-label>
            </swp-stat-card>
        </swp-stats-row>
    </swp-header-content>
</swp-sticky-header>

<swp-page-container>
    <swp-action-bar>
        <swp-search-input>
            <i class="ph ph-magnifying-glass"></i>
            <input type="text" id="searchInput" placeholder="Søg kunde (navn, telefon, email...)" />
        </swp-search-input>
        <swp-btn-group>
            <swp-btn class="secondary">
                <i class="ph ph-export"></i>
                <span localize="customers.export">Eksporter</span>
            </swp-btn>
            <swp-btn class="primary">
                <i class="ph ph-plus"></i>
                <span localize="customers.create">Ny kunde</span>
            </swp-btn>
        </swp-btn-group>
    </swp-action-bar>

    <swp-card class="customers-list">
        <swp-data-table>
            <swp-data-table-header>
                <swp-data-table-cell></swp-data-table-cell>
                <swp-data-table-cell localize="customers.column.name">Navn</swp-data-table-cell>
                <swp-data-table-cell localize="customers.column.phone">Telefon</swp-data-table-cell>
                <swp-data-table-cell localize="customers.column.email">Email</swp-data-table-cell>
                <swp-data-table-cell localize="customers.column.visits">Besøg</swp-data-table-cell>
                <swp-data-table-cell localize="customers.column.lastVisit">Sidste</swp-data-table-cell>
                <swp-data-table-cell localize="customers.column.hairdresser">Frisør</swp-data-table-cell>
                <swp-data-table-cell localize="customers.column.created">Oprettet</swp-data-table-cell>
                <swp-data-table-cell localize="customers.column.tags">Tags</swp-data-table-cell>
            </swp-data-table-header>

            <swp-data-table-row data-name="Anna Jensen" data-visits="6" data-created="2024-09" data-href="/kunder/anna-jensen">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar>AJ</swp-avatar>
                    <span>Anna Jensen</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 22 33 44 55</swp-data-table-cell>
                <swp-data-table-cell>anna.j@hotmail.dk</swp-data-table-cell>
                <swp-data-table-cell>6</swp-data-table-cell>
                <swp-data-table-cell>15. nov</swp-data-table-cell>
                <swp-data-table-cell>Nina K.</swp-data-table-cell>
                <swp-data-table-cell>Sep 2024</swp-data-table-cell>
                <swp-data-table-cell></swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Camilla Holm" data-visits="25" data-created="2022-12" data-tags="vip" data-href="/kunder/camilla-holm">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar>CH</swp-avatar>
                    <span>Camilla Holm</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 66 77 88 99</swp-data-table-cell>
                <swp-data-table-cell>camilla.h@outlook.dk</swp-data-table-cell>
                <swp-data-table-cell>25</swp-data-table-cell>
                <swp-data-table-cell>28. okt</swp-data-table-cell>
                <swp-data-table-cell>Emma L.</swp-data-table-cell>
                <swp-data-table-cell>Dec 2022</swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-tag class="vip">VIP</swp-tag>
                </swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Emma Larsen" data-visits="8" data-created="2024-06" data-href="/kunder/emma-larsen">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar>EL</swp-avatar>
                    <span>Emma Larsen</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 12 34 56 78</swp-data-table-cell>
                <swp-data-table-cell>emma.l@gmail.com</swp-data-table-cell>
                <swp-data-table-cell>8</swp-data-table-cell>
                <swp-data-table-cell>5. dec</swp-data-table-cell>
                <swp-data-table-cell>Nina K.</swp-data-table-cell>
                <swp-data-table-cell>Jun 2024</swp-data-table-cell>
                <swp-data-table-cell></swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Freja Christensen" data-visits="31" data-created="2022-08" data-tags="vip,allergi" data-href="/kunder/freja-christensen">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar>FC</swp-avatar>
                    <span>Freja Christensen</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 55 66 77 88</swp-data-table-cell>
                <swp-data-table-cell>freja.c@outlook.dk</swp-data-table-cell>
                <swp-data-table-cell>31</swp-data-table-cell>
                <swp-data-table-cell>20. nov</swp-data-table-cell>
                <swp-data-table-cell>Emma L.</swp-data-table-cell>
                <swp-data-table-cell>Aug 2022</swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-tag class="vip">VIP</swp-tag>
                    <swp-tag class="allergi">Allergi</swp-tag>
                </swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Ida Andersen" data-visits="3" data-created="2025-10" data-tags="ny" data-href="/kunder/ida-andersen">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar>IA</swp-avatar>
                    <span>Ida Andersen</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 11 22 33 44</swp-data-table-cell>
                <swp-data-table-cell>ida@firma.dk</swp-data-table-cell>
                <swp-data-table-cell>3</swp-data-table-cell>
                <swp-data-table-cell>28. nov</swp-data-table-cell>
                <swp-data-table-cell>Sofie M.</swp-data-table-cell>
                <swp-data-table-cell>Okt 2025</swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-tag class="ny">Ny</swp-tag>
                </swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Katrine Berg" data-visits="12" data-created="2024-04" data-href="/kunder/katrine-berg">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar>KB</swp-avatar>
                    <span>Katrine Berg</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 55 66 77 88</swp-data-table-cell>
                <swp-data-table-cell>katrine.b@firma.dk</swp-data-table-cell>
                <swp-data-table-cell>12</swp-data-table-cell>
                <swp-data-table-cell>1. nov</swp-data-table-cell>
                <swp-data-table-cell>Nina K.</swp-data-table-cell>
                <swp-data-table-cell>Apr 2024</swp-data-table-cell>
                <swp-data-table-cell></swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Line Frost" data-visits="9" data-created="2024-05" data-tags="sensitiv" data-href="/kunder/line-frost">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar>LF</swp-avatar>
                    <span>Line Frost</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 88 99 00 11</swp-data-table-cell>
                <swp-data-table-cell>line.f@mail.dk</swp-data-table-cell>
                <swp-data-table-cell>9</swp-data-table-cell>
                <swp-data-table-cell>15. okt</swp-data-table-cell>
                <swp-data-table-cell>Nina K.</swp-data-table-cell>
                <swp-data-table-cell>Maj 2024</swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-tag class="sensitiv">Sensitiv</swp-tag>
                </swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Louise Hansen" data-visits="18" data-created="2023-02" data-tags="stamkunde" data-href="/kunder/louise-hansen">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar class="purple">LH</swp-avatar>
                    <span>Louise Hansen</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 33 44 55 66</swp-data-table-cell>
                <swp-data-table-cell>louise.h@gmail.com</swp-data-table-cell>
                <swp-data-table-cell>18</swp-data-table-cell>
                <swp-data-table-cell>10. nov</swp-data-table-cell>
                <swp-data-table-cell>Emma L.</swp-data-table-cell>
                <swp-data-table-cell>Feb 2023</swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-tag class="stamkunde">Stamkunde</swp-tag>
                </swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Maja Petersen" data-visits="22" data-created="2023-01" data-tags="stamkunde" data-href="/kunder/maja-petersen">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar class="blue">MP</swp-avatar>
                    <span>Maja Petersen</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 98 76 54 32</swp-data-table-cell>
                <swp-data-table-cell>maja.p@mail.dk</swp-data-table-cell>
                <swp-data-table-cell>22</swp-data-table-cell>
                <swp-data-table-cell>1. dec</swp-data-table-cell>
                <swp-data-table-cell>Emma L.</swp-data-table-cell>
                <swp-data-table-cell>Jan 2023</swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-tag class="stamkunde">Stamkunde</swp-tag>
                </swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Maria Olsen" data-visits="2" data-created="2025-11" data-tags="ny" data-href="/kunder/maria-olsen">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar class="amber">MO</swp-avatar>
                    <span>Maria Olsen</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 44 55 66 77</swp-data-table-cell>
                <swp-data-table-cell>maria.o@mail.dk</swp-data-table-cell>
                <swp-data-table-cell>2</swp-data-table-cell>
                <swp-data-table-cell>5. nov</swp-data-table-cell>
                <swp-data-table-cell>Sofie M.</swp-data-table-cell>
                <swp-data-table-cell>Nov 2025</swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-tag class="ny">Ny</swp-tag>
                </swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Rikke Skov" data-visits="4" data-created="2025-08" data-href="/kunder/rikke-skov">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar>RS</swp-avatar>
                    <span>Rikke Skov</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 77 88 99 00</swp-data-table-cell>
                <swp-data-table-cell>rikke.s@gmail.com</swp-data-table-cell>
                <swp-data-table-cell>4</swp-data-table-cell>
                <swp-data-table-cell>20. okt</swp-data-table-cell>
                <swp-data-table-cell>Sofie M.</swp-data-table-cell>
                <swp-data-table-cell>Aug 2025</swp-data-table-cell>
                <swp-data-table-cell></swp-data-table-cell>
            </swp-data-table-row>

            <swp-data-table-row data-name="Sofie Nielsen" data-visits="14" data-created="2024-03" data-tags="vip" data-href="/kunder/sofie-nielsen">
                <swp-data-table-cell class="quick-view">
                    <swp-quick-view-btn data-drawer-trigger="customer-drawer">
                        <i class="ph ph-sidebar"></i>
                    </swp-quick-view-btn>
                </swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-avatar>SN</swp-avatar>
                    <span>Sofie Nielsen</span>
                </swp-data-table-cell>
                <swp-data-table-cell>+45 23 45 67 89</swp-data-table-cell>
                <swp-data-table-cell>sofie@email.dk</swp-data-table-cell>
                <swp-data-table-cell>14</swp-data-table-cell>
                <swp-data-table-cell>9. dec</swp-data-table-cell>
                <swp-data-table-cell>Emma L.</swp-data-table-cell>
                <swp-data-table-cell>Mar 2024</swp-data-table-cell>
                <swp-data-table-cell>
                    <swp-tag class="vip">VIP</swp-tag>
                </swp-data-table-cell>
            </swp-data-table-row>
        </swp-data-table>

        <swp-empty-state id="emptyState" style="display: none;">
            <i class="ph ph-users"></i>
            <span localize="customers.emptySearch">Ingen kunder matcher din søgning</span>
        </swp-empty-state>
    </swp-card>
</swp-page-container>

<!-- Customer Drawer -->
<div id="customer-drawer" data-drawer="xxl" data-customer-id="">
    <swp-drawer-header>
        <swp-drawer-title>
            <i class="ph ph-user"></i>
            <span localize="customers.drawer.title">Kundekort</span>
        </swp-drawer-title>
        <swp-drawer-actions>
            <a href="#" id="openFullDetailLink" class="drawer-detail-link">
                <i class="ph ph-arrow-square-out"></i>
                <span>Åbn fuld side</span>
            </a>
            <swp-drawer-close data-drawer-close>
                <i class="ph ph-x"></i>
            </swp-drawer-close>
        </swp-drawer-actions>
    </swp-drawer-header>

    <swp-drawer-body>
        <!-- Customer Header -->
        <swp-customer-header>
            <swp-customer-avatar-large id="drawerAvatar">SN</swp-customer-avatar-large>
            <swp-customer-header-info>
                <swp-customer-header-top>
                    <swp-customer-header-left>
                        <swp-customer-header-name id="drawerName">Sofie Nielsen</swp-customer-header-name>
                        <swp-customer-since id="drawerSince">Kunde siden marts 2024</swp-customer-since>
                    </swp-customer-header-left>
                    <swp-customer-header-contact>
                        <a href="tel:+4523456789" id="drawerPhoneLink">+45 23 45 67 89</a>
                        <a href="mailto:sofie@email.dk" id="drawerEmailLink">sofie@email.dk</a>
                        <swp-customer-tags id="drawerTags"></swp-customer-tags>
                    </swp-customer-header-contact>
                </swp-customer-header-top>
            </swp-customer-header-info>
        </swp-customer-header>

        <!-- Quick Stats -->
        <swp-quick-stats class="cols-3">
            <swp-quick-stat>
                <swp-stat-value id="drawerVisits">14</swp-stat-value>
                <swp-stat-label localize="customers.drawer.visits">Besøg</swp-stat-label>
            </swp-quick-stat>
            <swp-quick-stat>
                <swp-stat-value id="drawerInterval">32 dage</swp-stat-value>
                <swp-stat-label localize="customers.drawer.avgInterval">Gns. interval</swp-stat-label>
            </swp-quick-stat>
            <swp-quick-stat>
                <swp-stat-value id="drawerHairdresser">Emma L.</swp-stat-value>
                <swp-stat-label localize="customers.drawer.preferredHairdresser">Foretrukken frisør</swp-stat-label>
            </swp-quick-stat>
        </swp-quick-stats>

        <!-- Contact Info (Editable) -->
        <div>
            <swp-section-label localize="customers.drawer.contactInfo">Kontaktoplysninger</swp-section-label>
            <swp-edit-section>
                <swp-edit-row>
                    <swp-edit-label localize="customers.drawer.phone">Telefon</swp-edit-label>
                    <swp-edit-input><input type="tel" id="editPhone" value="+45 23 45 67 89"></swp-edit-input>
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label localize="customers.drawer.email">Email</swp-edit-label>
                    <swp-edit-input><input type="email" id="editEmail" value="sofie@email.dk"></swp-edit-input>
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label localize="customers.drawer.address">Adresse</swp-edit-label>
                    <swp-edit-input><input type="text" id="editAddress" value="Hovedgaden 12"></swp-edit-input>
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label localize="customers.drawer.zipCity">Postnr + By</swp-edit-label>
                    <swp-edit-input>
                        <input type="text" id="editZip" value="2100" class="short">
                        <input type="text" id="editCity" value="København Ø">
                    </swp-edit-input>
                </swp-edit-row>
            </swp-edit-section>
        </div>

        <!-- Marketing Opt-in -->
        <div>
            <swp-section-label localize="customers.drawer.marketing">Marketing</swp-section-label>
            <swp-marketing-section>
                <swp-toggle-row>
                    <swp-toggle-label localize="customers.drawer.emailMarketing">Email marketing</swp-toggle-label>
                    <swp-toggle-slider id="toggleEmail" 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.drawer.smsMarketing">SMS marketing</swp-toggle-label>
                    <swp-toggle-slider id="toggleSms" 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-marketing-section>
        </div>

        <!-- Profile Boxes -->
        <div>
            <swp-section-label localize="customers.drawer.profile">Profil</swp-section-label>
            <swp-profile-boxes>
                <swp-profile-box>
                    <swp-profile-box-label localize="customers.drawer.hairType">Hårtype</swp-profile-box-label>
                    <swp-profile-box-value>Medium · Bølget</swp-profile-box-value>
                </swp-profile-box>
                <swp-profile-box>
                    <swp-profile-box-label localize="customers.drawer.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.drawer.preference">Præference</swp-profile-box-label>
                    <swp-profile-box-value>Kold tone, ikke for mørk</swp-profile-box-value>
                </swp-profile-box>
                <swp-profile-box class="warning">
                    <swp-profile-box-label localize="customers.drawer.warnings">Advarsler</swp-profile-box-label>
                    <swp-profile-box-value>Parfume-allergi</swp-profile-box-value>
                </swp-profile-box>
            </swp-profile-boxes>
        </div>

        <!-- Chart -->
        <swp-chart-section>
            <swp-chart-header>
                <swp-section-label style="margin-bottom: 0;" localize="customers.drawer.revenueChart">Omsætning (sidste 6 mdr)</swp-section-label>
                <swp-chart-legend>
                    <swp-chart-legend-item>
                        <swp-chart-legend-dot class="services"></swp-chart-legend-dot>
                        <span localize="customers.drawer.services">Services</span>
                    </swp-chart-legend-item>
                    <swp-chart-legend-item>
                        <swp-chart-legend-dot class="products"></swp-chart-legend-dot>
                        <span localize="customers.drawer.products">Produkter</span>
                    </swp-chart-legend-item>
                </swp-chart-legend>
            </swp-chart-header>
            <swp-chart-container id="customerChart"></swp-chart-container>
        </swp-chart-section>

        <!-- Notes -->
        <swp-notes-section>
            <swp-section-label localize="customers.drawer.recentNotes">Seneste noter</swp-section-label>
            <swp-note-item>
                <swp-note-meta>
                    <swp-note-type localize="customers.drawer.noteType">Note</swp-note-type>
                    <swp-note-date>9. dec 2025</swp-note-date>
                </swp-note-meta>
                <swp-note-text>Kunden foretrækker naturlige farver og ønsker lidt ekstra tid til konsultation.</swp-note-text>
            </swp-note-item>
            <swp-note-item>
                <swp-note-meta>
                    <swp-note-type localize="customers.drawer.colorFormula">Farveformel</swp-note-type>
                    <swp-note-date>12. nov 2025</swp-note-date>
                </swp-note-meta>
                <swp-note-text>7/1 + 7/0 (1:1) · Oxidant 6% · Virketid 35 min</swp-note-text>
            </swp-note-item>
            <swp-see-all-link localize="customers.drawer.seeAllNotes">Se alle noter →</swp-see-all-link>
        </swp-notes-section>
    </swp-drawer-body>
</div>

@section Scripts {
    <script>
        // Row click - navigate to detail page
        document.querySelectorAll('swp-data-table-row[data-href]').forEach(row => {
            row.addEventListener('click', (e) => {
                // Don't navigate if clicking the quick-view button
                if (e.target.closest('swp-quick-view-btn')) {
                    return;
                }
                const href = row.dataset.href;
                if (href) {
                    window.location.href = href;
                }
            });
        });

        // Quick-view button click - update drawer data before it opens
        // Note: The drawer opening is handled by the global drawer system via data-drawer-trigger
        document.querySelectorAll('swp-quick-view-btn[data-drawer-trigger="customer-drawer"]').forEach(btn => {
            btn.addEventListener('click', (e) => {
                // Don't stop propagation - let the event bubble up to the drawer system
                const row = btn.closest('swp-data-table-row');
                const drawer = document.getElementById('customer-drawer');
                const detailLink = document.getElementById('openFullDetailLink');

                // Get customer data from row
                const customerName = row.dataset.name || 'unknown';
                const customerId = customerName.toLowerCase().replace(/\s+/g, '-');

                // Update drawer data attribute and link href
                drawer.dataset.customerId = customerId;
                detailLink.href = `/kunder/${customerId}`;
            });
        });
    </script>
}