{# Theme panel — polished theme customization dropdown #}
<div class="theme-panel" data-theme-panel>
    <button type="button" class="theme-panel-trigger" aria-label="Theme settings" title="Theme settings">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
    </button>
    <div class="theme-panel-menu">
        <div class="theme-panel-header">
            <span class="theme-panel-title">Appearance</span>
        </div>

        {% if show_mode %}
        <div class="theme-panel-group">
            <span class="theme-panel-label">Mode</span>
            <div class="theme-panel-modes">
                <button type="button" data-theme-mode="light" class="theme-panel-mode-btn{% if theme_mode == 'light' %} active{% endif %}" title="Light mode">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
                    <span>Light</span>
                </button>
                <button type="button" data-theme-mode="dark" class="theme-panel-mode-btn{% if theme_mode == 'dark' %} active{% endif %}" title="Dark mode">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
                    <span>Dark</span>
                </button>
                <button type="button" data-theme-mode="system" class="theme-panel-mode-btn{% if theme_mode == 'system' %} active{% endif %}" title="Match system">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
                    <span>System</span>
                </button>
            </div>
        </div>
        {% endif %}

        {% if show_packs and packs %}
        <div class="theme-panel-group">
            <label class="theme-panel-label">Theme</label>
            <div class="tp-select" data-tp-select="pack">
                <button type="button" class="tp-select-btn">
                    <span class="tp-select-value">{% for pack in packs %}{% if pack.name == current_pack %}{{ pack.display_name }}{% endif %}{% endfor %}</span>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                </button>
                <div class="tp-select-list">
                    {% for pack in packs %}
                    <button type="button" class="tp-select-option{% if pack.name == current_pack %} active{% endif %}" data-value="{{ pack.name }}">{{ pack.display_name }}</button>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}

        {% if show_presets or show_design %}
        <div class="theme-panel-group">
            <button type="button" class="theme-panel-customize-toggle" data-theme-panel-customize>
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
                <span>Customize</span>
            </button>
            <div class="theme-panel-customize" data-theme-panel-customize-content>
                {% if show_presets and presets %}
                <div class="theme-panel-field">
                    <label class="theme-panel-label">Color</label>
                    <div class="tp-select" data-tp-select="preset">
                        <button type="button" class="tp-select-btn">
                            <span class="tp-select-value">{% for preset in presets %}{% if preset.is_active %}{{ preset.display_name }}{% endif %}{% endfor %}</span>
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                        </button>
                        <div class="tp-select-list">
                            {% for preset in presets %}
                            <button type="button" class="tp-select-option{% if preset.is_active %} active{% endif %}" data-value="{{ preset.name }}">{{ preset.display_name }}</button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if show_design and designs %}
                <div class="theme-panel-field">
                    <label class="theme-panel-label">Design</label>
                    <div class="tp-select" data-tp-select="design">
                        <button type="button" class="tp-select-btn">
                            <span class="tp-select-value">{% for design in designs %}{% if design.name == current_design %}{{ design.display_name }}{% endif %}{% endfor %}</span>
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                        </button>
                        <div class="tp-select-list">
                            {% for design in designs %}
                            <button type="button" class="tp-select-option{% if design.name == current_design %} active{% endif %}" data-value="{{ design.name }}">{{ design.display_name }}</button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if show_layout and layouts %}
                <div class="theme-panel-field">
                    <label class="theme-panel-label">Layout</label>
                    <div class="tp-select" data-tp-select="layout">
                        <button type="button" class="tp-select-btn">
                            <span class="tp-select-value">{% for layout in layouts %}{% if layout.name == current_layout %}{{ layout.display_name }}{% elif not current_layout and layout.name == "" %}Base{% endif %}{% endfor %}{% if not current_layout %}Base{% endif %}</span>
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                        </button>
                        <div class="tp-select-list">
                            {% for layout in layouts %}
                            <button type="button" class="tp-select-option{% if layout.name == current_layout %} active{% endif %}" data-value="{{ layout.name }}">{{ layout.display_name }}</button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>