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

{% block title %}Settings — {{ themis_app_name }}{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Settings</h1>

    <form method="post" action="{% url 'themis:profile-settings' %}">
        {% csrf_token %}

        <!-- Timezone section -->
        <div class="card bg-base-200 mb-6">
            <div class="card-body">
                <h2 class="card-title text-lg">Timezone</h2>
                <p class="text-sm opacity-70 mb-4">
                    Set your home timezone. If you're traveling, set a current timezone
                    and times will display in both zones.
                </p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-control">
                        <label class="label" for="id_home_timezone">
                            <span class="label-text">Home Timezone</span>
                        </label>
                        {{ form.home_timezone }}
                    </div>
                    <div class="form-control">
                        <label class="label" for="id_current_timezone">
                            <span class="label-text">Current Timezone (traveling)</span>
                        </label>
                        {{ form.current_timezone }}
                        <label class="label">
                            <span class="label-text-alt opacity-60">Leave blank if you're at home</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Display preferences section -->
        <div class="card bg-base-200 mb-6">
            <div class="card-body">
                <h2 class="card-title text-lg">Display Preferences</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-control">
                        <label class="label" for="id_date_format">
                            <span class="label-text">Date Format</span>
                        </label>
                        {{ form.date_format }}
                    </div>
                    <div class="form-control">
                        <label class="label" for="id_time_format">
                            <span class="label-text">Time Format</span>
                        </label>
                        {{ form.time_format }}
                    </div>
                    <div class="form-control">
                        <label class="label" for="id_thousand_separator">
                            <span class="label-text">Number Format</span>
                        </label>
                        {{ form.thousand_separator }}
                    </div>
                    <div class="form-control">
                        <label class="label" for="id_week_start">
                            <span class="label-text">Week Starts On</span>
                        </label>
                        {{ form.week_start }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Theme section -->
        <div class="card bg-base-200 mb-6">
            <div class="card-body">
                <h2 class="card-title text-lg">Theme</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="form-control">
                        <label class="label" for="id_theme_mode">
                            <span class="label-text">Mode</span>
                        </label>
                        {{ form.theme_mode }}
                    </div>
                    <div class="form-control">
                        <label class="label" for="id_theme_name">
                            <span class="label-text">Light Theme</span>
                        </label>
                        {{ form.theme_name }}
                    </div>
                    <div class="form-control">
                        <label class="label" for="id_dark_theme_name">
                            <span class="label-text">Dark Theme</span>
                        </label>
                        {{ form.dark_theme_name }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Notifications section -->
        <div class="card bg-base-200 mb-6">
            <div class="card-body">
                <h2 class="card-title text-lg">Notifications</h2>
                <p class="text-sm opacity-70 mb-4">
                    Control how you receive in-app notifications.
                </p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-control">
                        <label class="label cursor-pointer justify-start gap-3" for="id_notifications_enabled">
                            {{ form.notifications_enabled }}
                            <span class="label-text">Enable notifications</span>
                        </label>
                    </div>
                    <div class="form-control">
                        <label class="label cursor-pointer justify-start gap-3" for="id_browser_notifications_enabled">
                            {{ form.browser_notifications_enabled }}
                            <span class="label-text">Browser desktop notifications</span>
                        </label>
                        <label class="label">
                            <span class="label-text-alt opacity-60">Your browser will ask for permission</span>
                        </label>
                    </div>
                    <div class="form-control">
                        <label class="label" for="id_notifications_min_level">
                            <span class="label-text">Minimum Level</span>
                        </label>
                        {{ form.notifications_min_level }}
                    </div>
                    <div class="form-control">
                        <label class="label" for="id_notification_retention_days">
                            <span class="label-text">Keep read notifications (days)</span>
                        </label>
                        {{ form.notification_retention_days }}
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="btn btn-primary">Save Settings</button>
        </div>
    </form>

    <!-- API Token — separate form, outside the settings form -->
    <div class="card bg-base-200 mb-6">
        <div class="card-body">
            <h2 class="card-title text-lg">API Token</h2>
            <p class="text-sm opacity-70 mb-4">
                Authenticates programmatic clients (Daedalus, scripts, IDE
                integrations) to Mnemosyne. Has the same access as your web
                session — keep it secret.
            </p>
            <div class="flex items-center gap-3">
                <code class="font-mono bg-base-300 px-3 py-2 rounded flex-1 break-all select-all text-sm">{{ api_token.key }}</code>
                <button type="button"
                        class="btn btn-ghost btn-sm"
                        onclick="navigator.clipboard.writeText('{{ api_token.key }}').then(() => { this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 2000); }).catch(() => {})">
                    Copy
                </button>
            </div>
            <div class="mt-3">
                <form method="post" action="{% url 'themis:api-token-regenerate' %}"
                      onsubmit="return confirm('Regenerate token? Any client using the current token will stop working until updated.')">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-warning btn-sm">Regenerate</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}