{# Appearance Dropdown #}
{# 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' %}

{% def appearance_option(value, label_key, default_label, icon_name) %}
<button type="button" data-appearance="{{ 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("monitor", 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>
            {{ appearance_option('system', 'theme.system', 'System', 'monitor') }}
            {{ appearance_option('light', 'theme.light', 'Light', 'sun') }}
            {{ appearance_option('dark', 'theme.dark', 'Dark', 'moon') }}
        </fieldset>
    </div>
</div>