{% extends "admin/base.html" %}

{% block title %}{{ t('themes.title') }}{% endblock %}

{% block content %}
<div class="page-header">
    <h2>🎨 {{ t('themes.title') }}</h2>
    <p>{{ t('themes.subtitle') }}</p>
</div>

<!-- Default theme mode -->
<form method="POST" id="theme-mode-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="settings-section">
        <h3>{{ t('themes.default_mode') }}</h3>
        <p class="help-text">{{ t('themes.default_mode_help') }}</p>
        <div class="btn-group">
            <label class="theme-mode-option {{ 'theme-mode-option--active' if default_mode == 'auto' }}">
                <input type="radio" name="default_theme_mode" value="auto" {{ 'checked' if default_mode == 'auto' }}>
                <span>🖥️ {{ t('themes.auto') }}</span>
            </label>
            <label class="theme-mode-option {{ 'theme-mode-option--active' if default_mode == 'dark' }}">
                <input type="radio" name="default_theme_mode" value="dark" {{ 'checked' if default_mode == 'dark' }}>
                <span>🌙 {{ t('themes.dark') }}</span>
            </label>
            <label class="theme-mode-option {{ 'theme-mode-option--active' if default_mode == 'light' }}">
                <input type="radio" name="default_theme_mode" value="light" {{ 'checked' if default_mode == 'light' }}>
                <span>☀️ {{ t('themes.light') }}</span>
            </label>
        </div>
        <div class="mt-4">
            <button type="submit" class="btn btn-primary">{{ t('themes.save_mode') }}</button>
        </div>
    </div>
</form>

<!-- Available Themes -->
<form method="POST" id="theme-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="settings-section">
        <h3>{{ t('themes.available_themes') }}</h3>
        
        {% if themes %}
        <div class="grid-auto">
            {% for theme in themes %}
            <div class="theme-card {{ 'theme-card--active' if theme.name == active_theme }}">
                {% if theme.preview %}
                <div class="theme-card__preview">
                    <img src="{{ theme.preview }}" alt="{{ theme.display_name }}">
                </div>
                {% else %}
                <div class="theme-card__preview theme-card__preview--placeholder">
                    <span class="empty-state-icon">🎨</span>
                </div>
                {% endif %}
                <div class="theme-card__body">
                    <div class="theme-card__header">
                        <h4 class="theme-card__title">{{ theme.display_name }}</h4>
                        {% if theme.name == active_theme %}
                        <span class="theme-card__active-badge">{{ t('themes.active') }}</span>
                        {% endif %}
                    </div>
                    {% if theme.description %}
                    <p class="theme-card__desc">{{ theme.description }}</p>
                    {% endif %}
                    <div class="theme-card__tags">
                        {% if theme.has_light_mode %}
                        <span class="theme-card__tag">🌙 {{ t('themes.dark') }}</span>
                        <span class="theme-card__tag">☀️ {{ t('themes.light') }}</span>
                        {% else %}
                        <span class="theme-card__tag">{{ t('themes.single_mode') }}</span>
                        {% endif %}
                    </div>
                    {% if theme.name != active_theme %}
                    <button type="submit" name="active_theme" value="{{ theme.name }}" class="btn btn-primary theme-card__activate-btn">{{ t('themes.activate') }}</button>
                    {% else %}
                    <div class="theme-card__current">✓ {{ t('themes.currently_active') }}</div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-state-icon">🎨</div>
            <h3>{{ t('themes.no_themes') }}</h3>
            <p>{{ t('themes.no_themes_help') }}</p>
        </div>
        {% endif %}
    </div>
</form>

<!-- Custom CSS -->
<form method="POST" id="custom-css-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="settings-section">
        <h3>{{ t('themes.custom_css') }}</h3>
        <p class="help-text">{{ t('themes.custom_css_help') }}</p>
        <div class="form-group">
            <textarea id="site_custom_css"
                      name="site_custom_css"
                      class="code-textarea"
                      rows="14"
                      spellcheck="false"
                      autocomplete="off"
                      autocapitalize="off"
                      aria-label="{{ t('themes.custom_css') }}"
                      placeholder="{{ t('themes.custom_css_placeholder') }}">{{ custom_css }}</textarea>
        </div>
        <div class="mt-4">
            <button type="submit" class="btn btn-primary">{{ t('themes.save_custom_css') }}</button>
        </div>
    </div>
</form>

<script>
document.querySelectorAll('#theme-mode-form .theme-mode-option input[type="radio"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        document.querySelectorAll('#theme-mode-form .theme-mode-option').forEach(function(opt) {
            opt.classList.remove('theme-mode-option--active');
        });
        this.closest('.theme-mode-option').classList.add('theme-mode-option--active');
    });
});
</script>
{% endblock %}
