<swp-profile-drawer id="profileDrawer">
    <swp-drawer-header>
        <swp-drawer-title>Profil</swp-drawer-title>
        <swp-drawer-close id="closeProfileDrawer">
            <i class="ph ph-x"></i>
        </swp-drawer-close>
    </swp-drawer-header>

    <swp-drawer-content>
        <swp-profile-section>
            <swp-profile-avatar-large>MJ</swp-profile-avatar-large>
            <swp-profile-name-large>Maria Jensen</swp-profile-name-large>
            <swp-profile-email>maria@salon.dk</swp-profile-email>
        </swp-profile-section>

        <swp-drawer-divider></swp-drawer-divider>

        <swp-drawer-menu>
            <swp-drawer-menu-item>
                <i class="ph ph-user"></i>
                <span>Min profil</span>
            </swp-drawer-menu-item>
            <swp-drawer-menu-item>
                <i class="ph ph-gear"></i>
                <span>Indstillinger</span>
            </swp-drawer-menu-item>
        </swp-drawer-menu>

        <swp-drawer-divider></swp-drawer-divider>

        <swp-theme-toggle>
            <swp-theme-label>
                <i class="ph ph-moon"></i>
                <span>Mørk tilstand</span>
            </swp-theme-label>
            <swp-toggle-switch id="themeToggle">
                <input type="checkbox" id="themeCheckbox">
                <swp-toggle-slider></swp-toggle-slider>
            </swp-toggle-switch>
        </swp-theme-toggle>
    </swp-drawer-content>

    <swp-drawer-footer>
        <swp-drawer-action class="logout" id="logoutBtn">
            <i class="ph ph-sign-out"></i>
            <span>Log ud</span>
        </swp-drawer-action>
    </swp-drawer-footer>
</swp-profile-drawer>
