{% extends "layout.twig" %}

{% set errorMessages = {
    'name_required':        'Sprint name is required.',
    'dates_invalid':        'Start and end dates must both be valid dates (YYYY-MM-DD).',
    'dates_order':          'End date must not be before start date.',
    'dates_too_long':       'Date range spans more than 26 weeks.',
    'reserve_invalid':      'Reserve must be a number (0–100).',
    'reserve_out_of_range': 'Reserve must be between 0 and 100 percent.',
    'db_error':             'Could not save. Try again.',
} %}

{% block content %}
<section class="max-w-xl">
    <h1 class="text-2xl font-semibold tracking-tight">New sprint</h1>
    <p class="text-slate-600 mt-1 text-sm dark:text-slate-400">
        Worker membership, weekly availability and tasks are configured on the
        sprint page after creation.
    </p>

    {% if error != '' and errorMessages[error] is defined %}
        <div class="mt-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:bg-red-900 dark:border-red-800 dark:text-red-200">
            {{ errorMessages[error] }}
        </div>
    {% endif %}

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

        <label class="block">
            <span class="text-sm text-slate-700 dark:text-slate-300">Name</span>
            <input name="name" type="text" required
                   value="{{ form.name }}"
                   placeholder="e.g. Sprint 12"
                   class="mt-1 block w-full rounded-md border-slate-300 border shadow-sm px-3 py-2 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
        </label>

        <div class="grid grid-cols-2 gap-3">
            <label class="block">
                <span class="text-sm text-slate-700 dark:text-slate-300">Start date</span>
                <input name="start_date" type="date" required
                       value="{{ form.start_date }}"
                       class="mt-1 block w-full rounded-md border-slate-300 border shadow-sm px-3 py-2 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
            </label>
            <label class="block">
                <span class="text-sm text-slate-700 dark:text-slate-300">End date</span>
                <input name="end_date" type="date" required
                       value="{{ form.end_date }}"
                       class="mt-1 block w-full rounded-md border-slate-300 border shadow-sm px-3 py-2 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
            </label>
        </div>

        <label class="block">
            <span class="text-sm text-slate-700 dark:text-slate-300">Reserve (%)</span>
            <input name="reserve_fraction" type="number" min="0" max="100" step="1" required
                   value="{{ form.reserve_fraction }}"
                   class="mt-1 block w-full rounded-md border-slate-300 border shadow-sm px-3 py-2 font-mono focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
            <span class="text-xs text-slate-500 dark:text-slate-400">Reduction from raw capacity. The Excel uses 20%. Week rows derive from the date range and get 5 days/week by default; edit on the sprint page.</span>
        </label>

        <div class="flex gap-3 pt-2">
            <button type="submit"
                    class="rounded-md bg-slate-900 text-white px-4 py-2 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
                Create sprint
            </button>
            <a href="/" class="inline-flex items-center rounded-md border border-slate-300 bg-white text-slate-700 px-4 py-2 text-sm hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                Cancel
            </a>
        </div>
    </form>
</section>
{% endblock %}