<swp-profile-drawer id="profileDrawer">
    <swp-drawer-header>
        <swp-drawer-title localize="profile.title">Min profil</swp-drawer-title>
        <swp-drawer-close id="drawerClose">
            <i class="ph ph-x"></i>
        </swp-drawer-close>
    </swp-drawer-header>

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

        <swp-drawer-section>
            <swp-drawer-section-label localize="profile.account">Konto</swp-drawer-section-label>
            <swp-drawer-item>
                <i class="ph ph-user-circle"></i>
                <swp-drawer-item-text localize="profile.editProfile">Rediger profil</swp-drawer-item-text>
                <i class="ph ph-caret-right"></i>
            </swp-drawer-item>
            <swp-drawer-item>
                <i class="ph ph-key"></i>
                <swp-drawer-item-text localize="profile.changePassword">Skift adgangskode</swp-drawer-item-text>
                <i class="ph ph-caret-right"></i>
            </swp-drawer-item>
            <swp-drawer-item id="openNotificationSettings">
                <i class="ph ph-bell"></i>
                <swp-drawer-item-text localize="profile.notifications">Notifikationer</swp-drawer-item-text>
                <swp-drawer-item-hint>3 ulæste</swp-drawer-item-hint>
            </swp-drawer-item>
            <swp-drawer-item id="openTodoDrawer">
                <i class="ph ph-check-square"></i>
                <swp-drawer-item-text localize="profile.myTasks">Mine opgaver</swp-drawer-item-text>
                <swp-drawer-item-hint>2 i dag</swp-drawer-item-hint>
            </swp-drawer-item>
        </swp-drawer-section>

        <swp-drawer-section>
            <swp-drawer-section-label localize="profile.appearance">Udseende</swp-drawer-section-label>
            <swp-theme-toggle id="themeToggleDrawer">
                <swp-theme-option data-theme="light" title="Lyst tema">
                    <i class="ph ph-sun"></i>
                </swp-theme-option>
                <swp-theme-option data-theme="dark" class="active" title="Mørkt tema">
                    <i class="ph ph-moon"></i>
                </swp-theme-option>
            </swp-theme-toggle>
        </swp-drawer-section>

        <swp-drawer-section>
            <swp-drawer-section-label localize="profile.support">Support</swp-drawer-section-label>
            <swp-drawer-item>
                <i class="ph ph-question"></i>
                <swp-drawer-item-text localize="profile.helpSupport">Hjælp & Support</swp-drawer-item-text>
                <i class="ph ph-caret-right"></i>
            </swp-drawer-item>
            <swp-drawer-item>
                <i class="ph ph-info"></i>
                <swp-drawer-item-text localize="profile.about">Om PlanTempus</swp-drawer-item-text>
                <swp-drawer-item-hint>v2.1.0</swp-drawer-item-hint>
            </swp-drawer-item>
        </swp-drawer-section>
    </swp-drawer-content>

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