{# Theme switcher component template #}
<div class="theme-switcher {{ dropdown_class }}" data-theme-switcher>
    {% if show_mode_toggle %}
    <div class="theme-mode-controls">
        <button type="button"
                class="theme-mode-btn {{ button_class }}{% if theme_mode == 'light' %} active{% endif %}"
                data-djust-event="set_theme_mode"
                data-djust-params='{"mode": "light"}'
                aria-label="Light mode"
                title="Light mode">
            {# Sun icon #}
            <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" aria-hidden="true">
                <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>
            {% if show_labels %}<span>Light</span>{% endif %}
        </button>

        <button type="button"
                class="theme-mode-btn {{ button_class }}{% if theme_mode == 'dark' %} active{% endif %}"
                data-djust-event="set_theme_mode"
                data-djust-params='{"mode": "dark"}'
                aria-label="Dark mode"
                title="Dark mode">
            {# Moon icon #}
            <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" aria-hidden="true">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
            {% if show_labels %}<span>Dark</span>{% endif %}
        </button>

        <button type="button"
                class="theme-mode-btn {{ button_class }}{% if theme_mode == 'system' %} active{% endif %}"
                data-djust-event="set_theme_mode"
                data-djust-params='{"mode": "system"}'
                aria-label="System preference"
                title="Follow system preference">
            {# Monitor icon #}
            <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" aria-hidden="true">
                <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>
            {% if show_labels %}<span>System</span>{% endif %}
        </button>
    </div>
    {% endif %}

    {% if show_presets and presets %}
    <div class="theme-preset-controls">
        <select class="theme-preset-select {{ dropdown_class }}"
                data-djust-event="set_theme_preset"
                data-djust-value-key="preset"
                aria-label="Select theme">
            {% for preset in presets %}
            <option value="{{ preset.name }}"{% if preset.is_active %} selected{% endif %}>
                {{ preset.display_name }}
            </option>
            {% endfor %}
        </select>
    </div>
    {% endif %}
</div>

<style>
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.theme-mode-controls {
    display: flex;
    background-color: hsl(var(--muted));
    border-radius: var(--radius);
    padding: 0.25rem;
    gap: 0.125rem;
}

.theme-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    border-radius: calc(var(--radius) - 0.125rem);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.theme-mode-btn:hover {
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
}

.theme-mode-btn.active {
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.theme-mode-btn svg {
    flex-shrink: 0;
}

.theme-preset-select {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.theme-preset-select:hover {
    border-color: hsl(var(--ring));
}

.theme-preset-select:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Dark mode adjustments */
[data-theme="dark"] .theme-mode-controls {
    background-color: hsl(var(--muted));
}

[data-theme="dark"] .theme-mode-btn.active {
    background-color: hsl(var(--accent));
}
</style>
