{# Appearance Dropdown (mode + brand) #}
{# Native popover API - browser handles open/close, focus, escape key #}
{# Use theme_menu_id variable to allow unique IDs for desktop/mobile #}
{% let _theme_menu_id = theme_menu_id ?? 'theme-menu' %}

{# HELPER: Render a theme option button #}
{% def theme_option(type, value, label_key, default_label, icon_name=none) %}
<button type="button" data-{{ type }}="{{ value }}" class="theme-option">
    {% if icon_name %}{{ icon(icon_name, size=18) }}{% end %}
    <span>{{ t(label_key, default=default_label) }}</span>
</button>
{% end %}

<div class="theme-controls">
    <button class="theme-dropdown__button" popovertarget="{{ _theme_menu_id }}" popovertargetaction="toggle"
        title="{{ t('theme.presets', default='Theme presets') }}"
        aria-label="{{ t('theme.open_menu', default='Open theme menu') }}">
        <span class="theme-dropdown__icon" aria-hidden="true">
            {{ icon("palette", size=24) }}
        </span>
        <span class="theme-dropdown__label">{{ t('theme.appearance', default='Appearance') }}</span>
        {{ icon("chevron-down", size=20) }}
    </button>
    <div id="{{ _theme_menu_id }}" popover class="theme-dropdown__menu--popover">
        <fieldset class="theme-menu-section">
            <legend class="separator">{{ t('theme.mode', default='Mode') }}</legend>
            {{ theme_option('appearance', 'system', 'theme.system', 'System', 'monitor') }}
            {{ theme_option('appearance', 'light', 'theme.light', 'Light', 'sun') }}
            {{ theme_option('appearance', 'dark', 'theme.dark', 'Dark', 'moon') }}
        </fieldset>
        <fieldset class="theme-menu-section">
            <legend class="separator">{{ t('theme.palette', default='Palette') }}</legend>
            {{ theme_option('palette', 'snow-lynx', 'theme.palette_snow_lynx', 'Snow Lynx') }}
            {{ theme_option('palette', 'brown-bengal', 'theme.palette_brown_bengal', 'Brown Bengal') }}
            {{ theme_option('palette', 'silver-bengal', 'theme.palette_silver_bengal', 'Silver Bengal') }}
            {{ theme_option('palette', 'charcoal-bengal', 'theme.palette_charcoal_bengal', 'Charcoal Bengal') }}
            {{ theme_option('palette', 'blue-bengal', 'theme.palette_blue_bengal', 'Blue Bengal') }}
        </fieldset>
    </div>
</div>