{% extends group_config.template_base or "base_demo.html" %}

{% block title %}Settings{% endblock %}

{% block content %}
<main class="container">
    <hgroup>
        <h1>⚙️ Settings</h1>
        <p>Customize your Crumbforest experience</p>
    </hgroup>

    <div class="grid">
        <!-- Theme Selection -->
        <article>
            <header>
                <h3>🎨 Appearance</h3>
            </header>

            <form action="/settings/theme" method="post">
                <label for="theme">Theme</label>
                <select name="theme" id="theme" onchange="this.form.submit()">
                    {% for variant_id, variant in theme_variants.items() %}
                    <option value="{{ variant_id }}" {% if user.theme==variant_id %}selected{% endif %}>
                        {{ variant.name }}
                    </option>
                    {% endfor %}
                </select>

                <small>
                    Current: <strong>{{ theme_variants[user.theme].name if user.theme in theme_variants else user.theme
                        }}</strong>
                </small>
            </form>
        </article>

        <!-- Accessibility Settings -->
        <article>
            <header>
                <h3>♿ Accessibility</h3>
            </header>

            <form action="/settings/accessibility" method="post">
                <label>
                    <input type="checkbox" name="high_contrast" {% if user.accessibility and
                        user.accessibility.high_contrast %}checked{% endif %}>
                    High Contrast Mode
                </label>

                <label>
                    <input type="checkbox" name="animation_reduced" {% if user.accessibility and
                        user.accessibility.animation_reduced %}checked{% endif %}>
                    Reduce Animations
                </label>

                <label for="font_size">Font Size</label>
                <select name="font_size" id="font_size">
                    <option value="normal" {% if not user.accessibility or user.accessibility.font_size !='large'
                        %}selected{% endif %}>Normal</option>
                    <option value="large" {% if user.accessibility and user.accessibility.font_size=='large'
                        %}selected{% endif %}>Large</option>
                </select>

                <button type="submit" class="contrast">Save Accessibility Settings</button>
            </form>
        </article>
    </div>

    <!-- Account Info (Read Only) -->
    <article>
        <header>
            <h3>👤 Account Info</h3>
        </header>
        <dl>
            <dt>Email</dt>
            <dd>{{ user.email }}</dd>

            <dt>Group</dt>
            <dd>
                <span class="badge">{{ group_config.name }}</span>
            </dd>

            <dt>Role</dt>
            <dd>{{ user.role }}</dd>
        </dl>
    </article>
</main>
{% endblock %}