{% extends "layout.twig" %}

{% block content %}
<section class="space-y-6">
    <header class="flex items-end justify-between gap-4">
        <div>
            <nav class="text-xs text-slate-500 dark:text-slate-400">
                <a href="/" class="hover:underline">Sprints</a> /
            </nav>
            <h1 class="text-2xl font-semibold tracking-tight">Settings</h1>
            <p class="text-slate-600 mt-1 text-sm dark:text-slate-400">
                Global flags. Changes take effect on every sprint immediately.
            </p>
        </div>
    </header>

    {% if flash is not null %}
        <div class="rounded-md border border-green-200 bg-green-50 px-4 py-2 text-sm text-green-800 dark:bg-green-900 dark:border-green-800 dark:text-green-200">
            {{ flash }}
        </div>
    {% endif %}

    <form method="post" action="/settings" hx-boost="true" hx-target="body"
          class="rounded-lg border bg-white p-5 space-y-4 dark:bg-slate-800 dark:border-slate-700">
        <input type="hidden" name="_csrf" value="{{ csrfToken }}">

        <h2 class="text-sm font-semibold text-slate-700 uppercase tracking-wider dark:text-slate-200">Features</h2>

        <label class="flex items-start gap-3">
            <input type="checkbox" name="task_status_enabled" value="1"
                   {{ values.task_status_enabled|default(false) ? 'checked' : '' }}
                   class="mt-1 rounded border-slate-300 focus:ring-slate-400 dark:border-slate-600 dark:focus:ring-slate-500">
            <span>
                <span class="font-medium">{{ keyLabels.task_status_enabled|default('Task status colors') }}</span>
                <span class="block text-xs text-slate-500 mt-0.5 dark:text-slate-400">
                    Show a status selector next to each task-cell day input on every
                    sprint plan. States: <em>zugewiesen</em> (transparent),
                    <em>gestartet</em> (yellow), <em>abgeschlossen</em> (green),
                    <em>abgebrochen</em> (red). Adds a Status filter to the task list.
                    Any signed-in user can change a cell's status; days remain
                    admin-only.
                </span>
            </span>
        </label>

        <div>
            <button type="submit"
                    class="rounded-md bg-slate-900 text-white px-3 py-2 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
                Save
            </button>
        </div>
    </form>
</section>
{% endblock %}