<div
    x-data
    x-show="$store.settings.start"
    x-cloak
    class="settings-dropdown"
    @keydown.escape.window="$store.settings.close()"
>
    <div class="settings-header">
        <span>Settings</span>
    </div>

    <div class="settings-section">
        <div class="settings-section-title">
            <i data-lucide="sun-moon" size="14"></i>
            Theme
        </div>
        <button type="button" class="settings-theme-toggle" @click="$store.settings.toggleTheme()">
            <template x-if="$store.settings.currentTheme === 'default'">
                <span class="settings-theme-toggle-inner">
                    <i data-lucide="moon" size="15"></i>
                    Dark
                    <span class="settings-theme-toggle-badge">ON</span>
                </span>
            </template>
            <template x-if="$store.settings.currentTheme === 'alternate'">
                <span class="settings-theme-toggle-inner">
                    <i data-lucide="sun" size="15"></i>
                    Light
                    <span class="settings-theme-toggle-badge">ON</span>
                </span>
            </template>
        </button>
    </div>

        <div class="settings-separator"></div>

        @auth
            <div class="settings-section">
                <div class="settings-section-title">
                    <i data-lucide="user-cog" size="14"></i>
                    Account
                </div>
                <a href="{{ xfRoute('account/account-details') }}" class="settings-link">
                    <i data-lucide="settings-2" size="14"></i>
                    XenForo settings
                    <i data-lucide="external-link" size="12" style="margin-left:auto"></i>
                </a>
            </div>
        @endauth

</div>
