{% extends "base.html" %}

{% block title %}Settings - {{ brand_name }}{% endblock %}

{% block content %}
    <div class="ownmail-settings-page">
        <h2>Settings</h2>
        <p class="ownmail-settings-config-path">Config: <code>{{ config_path }}</code></p>

        {% if saved %}
        <div class="ownmail-settings-saved">✓ Settings saved.</div>
        {% endif %}

        <form method="POST" action="/settings" class="ownmail-settings-form">
            <fieldset class="ownmail-settings-section">
                <legend>Appearance</legend>

                <div class="ownmail-settings-field">
                    <label>Theme</label>
                    <div class="ownmail-settings-theme-options">
                        <label class="ownmail-settings-radio">
                            <input type="radio" name="theme" value="auto" id="theme-auto">
                            Auto (follow system)
                        </label>
                        <label class="ownmail-settings-radio">
                            <input type="radio" name="theme" value="light" id="theme-light">
                            Light
                        </label>
                        <label class="ownmail-settings-radio">
                            <input type="radio" name="theme" value="dark" id="theme-dark">
                            Dark
                        </label>
                    </div>
                    <p class="ownmail-settings-hint">Theme preference is stored in your browser.</p>
                </div>

                <div class="ownmail-settings-field">
                    <label for="brand_name">Brand name</label>
                    <input type="text" name="brand_name" id="brand_name"
                           value="{{ settings.brand_name }}" placeholder="ownmail">
                    <p class="ownmail-settings-hint">Name shown in the header.</p>
                </div>

                <div class="ownmail-settings-field">
                    <label for="date_format">Search date format</label>
                    <input type="text" name="date_format" id="date_format"
                           value="{{ settings.date_format or '' }}"
                           placeholder="%b %d, %Y">
                    <p class="ownmail-settings-hint">Python strftime format for search results. Default: %b %d, %Y (e.g. "Jan 27, 2026").</p>
                </div>

                <div class="ownmail-settings-field">
                    <label for="detail_date_format">Message date format</label>
                    <input type="text" name="detail_date_format" id="detail_date_format"
                           value="{{ settings.detail_date_format or '' }}"
                           placeholder="%a, %d %b %Y %H:%M:%S">
                    <p class="ownmail-settings-hint">Python strftime format for message view. Default: %a, %d %b %Y %H:%M:%S (e.g. "Tue, 27 Jan 2026 07:16:05").</p>
                </div>

                <div class="ownmail-settings-field">
                    <label for="timezone">Timezone</label>
                    <select name="timezone" id="timezone">
                        <option value="">Server default — {{ server_timezone }}</option>
                        {% for tz in timezone_list %}
                        <option value="{{ tz.value }}" {{ 'selected' if settings.timezone == tz.value else '' }}>{{ tz.label }}</option>
                        {% endfor %}
                    </select>
                    <p class="ownmail-settings-hint">Timezone for displaying email dates.</p>
                </div>
            </fieldset>

            <fieldset class="ownmail-settings-section">
                <legend>Display</legend>

                <div class="ownmail-settings-field">
                    <label for="page_size">Results per page</label>
                    <input type="number" name="page_size" id="page_size"
                           value="{{ settings.page_size }}" min="1" max="500">
                </div>

                <div class="ownmail-settings-field ownmail-settings-checkbox">
                    <label>
                        <input type="checkbox" name="block_images" id="block_images"
                               {{ 'checked' if settings.block_images }}>
                        Block external images by default
                    </label>
                    <p class="ownmail-settings-hint">Images from trusted senders are always shown.</p>
                </div>

                <div class="ownmail-settings-field ownmail-settings-checkbox">
                    <label>
                        <input type="checkbox" name="auto_scale" id="auto_scale"
                               {{ 'checked' if settings.auto_scale }}>
                        Auto-scale wide emails to fit viewport
                    </label>
                </div>
            </fieldset>

            <fieldset class="ownmail-settings-section">
                <legend>Trusted senders</legend>
                <div class="ownmail-settings-field">
                    <label for="trusted_senders">Trusted sender emails (one per line)</label>
                    <textarea name="trusted_senders" id="trusted_senders" rows="8"
                              placeholder="user@example.com">{{ settings.trusted_senders | join('\n') }}</textarea>
                    <p class="ownmail-settings-hint">Images from these senders are always loaded, even when image blocking is on.</p>
                </div>
            </fieldset>

            <div class="ownmail-settings-actions">
                <button type="submit" class="ownmail-settings-save">Save settings</button>
            </div>
        </form>
    </div>

    <script>
    // Theme radios are client-side only (localStorage), not submitted with form
    (function() {
        var pref = localStorage.getItem('ownmail-theme') || 'auto';
        var radio = document.getElementById('theme-' + pref);
        if (radio) radio.checked = true;

        // Update localStorage when theme radio changes
        document.querySelectorAll('input[name="theme"]').forEach(function(r) {
            r.addEventListener('change', function() {
                localStorage.setItem('ownmail-theme', this.value);
                applyTheme();
            });
        });
    })();
    </script>
{% endblock %}