{% extends "layout.twig" %}

{% set dayLabels = constant('App\\Domain\\SprintWeek::DAY_LABELS') %}

{% block content %}
<section class="space-y-6"
         data-sprint-root
         data-sprint-id="{{ sprint.id }}"
         data-csrf="{{ csrfToken }}">

    <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> /
                <a href="/sprints/{{ sprint.id }}" class="hover:underline">{{ sprint.name }}</a> /
            </nav>
            <h1 class="text-2xl font-semibold tracking-tight">Settings</h1>
        </div>
        <div data-status
             class="text-sm border rounded px-3 py-1 opacity-0 transition-opacity duration-200 border-slate-200 bg-slate-50 text-slate-700 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300">
        </div>
    </header>

    <section class="rounded-lg border bg-white p-5 space-y-4 dark:bg-slate-800 dark:border-slate-700">
        <h2 class="text-sm font-semibold text-slate-700 uppercase tracking-wider dark:text-slate-200">Sprint</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <label class="md:col-span-2 block">
                <span class="text-sm text-slate-700 dark:text-slate-300">Name</span>
                <input data-meta name="name" type="text" value="{{ sprint.name }}"
                       class="mt-1 block w-full rounded-md border border-slate-300 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">Start date</span>
                <input data-meta name="start_date" type="date" value="{{ sprint.startDate }}"
                       class="mt-1 block w-full rounded-md border border-slate-300 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 data-meta name="end_date" type="date" value="{{ sprint.endDate }}"
                       class="mt-1 block w-full rounded-md border border-slate-300 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">Reserve (%)</span>
                <input data-meta name="reserve_fraction" type="number" min="0" max="100" step="1"
                       value="{{ (sprint.reserveFraction * 100)|number_format(0) }}"
                       class="mt-1 block w-full rounded-md border border-slate-300 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">
            </label>
        </div>
        <p class="text-xs text-slate-500 dark:text-slate-400">Changes save automatically.</p>
    </section>

    <section class="rounded-lg border bg-white p-5 space-y-4 dark:bg-slate-800 dark:border-slate-700">
        <div>
            <h2 class="text-sm font-semibold text-slate-700 uppercase tracking-wider dark:text-slate-200">Weeks</h2>
            <p class="text-xs text-slate-500 mt-1 dark:text-slate-400">
                {{ weeks|length }} week{{ weeks|length == 1 ? '' : 's' }} — derived
                from the sprint's start and end dates. Edit those above to add or
                remove rows. Tick the weekdays that are workdays for each week;
                the count feeds the Arbeitstage header on the sprint page.
            </p>
        </div>
        <div class="overflow-hidden rounded border border-slate-200 dark:border-slate-700">
            <table class="min-w-full text-sm" data-weeks-table>
                <thead class="bg-slate-50 text-slate-600 text-xs uppercase tracking-wider dark:bg-slate-700 dark:text-slate-300">
                    <tr>
                        <th class="text-left px-3 py-2 font-semibold">#</th>
                        <th class="text-left px-3 py-2 font-semibold">KW</th>
                        <th class="text-left px-3 py-2 font-semibold">Start</th>
                        {% for label in dayLabels %}
                            <th class="text-center px-2 py-2 font-semibold w-10">{{ label }}</th>
                        {% endfor %}
                        <th class="text-right px-3 py-2 font-semibold">Arbeitstage</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                    {% for w in weeks %}
                        <tr data-week-row data-week-id="{{ w.id }}">
                            <td class="px-3 py-2 font-mono">{{ w.sortOrder }}</td>
                            <td class="px-3 py-2 font-mono">KW{{ w.isoWeek }}</td>
                            <td class="px-3 py-2 font-mono">{{ w.startDate }}</td>
                            {% for bit, label in dayLabels %}
                                <td class="px-2 py-2 text-center">
                                    <input type="checkbox"
                                           data-day-toggle
                                           data-bit="{{ bit }}"
                                           data-label="{{ label }}"
                                           aria-label="{{ label }}"
                                           {{ w.hasDay(label) ? 'checked' : '' }}
                                           class="rounded border-slate-300 focus:ring-slate-400 dark:border-slate-600 dark:focus:ring-slate-500">
                                </td>
                            {% endfor %}
                            <td class="px-3 py-2 font-mono text-right" data-week-count>
                                {{ w.maxWorkingDays }}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <p class="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-3 py-2 dark:bg-amber-900 dark:border-amber-800 dark:text-amber-200">
            Shortening the date range deletes trailing weeks and any data attached to them.
        </p>
    </section>

    <section class="rounded-lg border bg-white p-5 space-y-4 dark:bg-slate-800 dark:border-slate-700">
        <h2 class="text-sm font-semibold text-slate-700 uppercase tracking-wider dark:text-slate-200">Workers</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <h3 class="text-xs font-semibold text-slate-500 uppercase mb-2 dark:text-slate-400">Available</h3>
                <div class="rounded border border-slate-200 dark:border-slate-700">
                    <ul data-available class="divide-y divide-slate-100 dark:divide-slate-700">
                        {% for w in availableWorkers %}
                            <li class="flex items-center gap-2 px-3 py-2 border-b last:border-b-0 dark:border-slate-700"
                                data-worker-id="{{ w.id }}">
                                <span class="flex-1">{{ w.name }}</span>
                                <button type="button" data-add class="text-sm text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300">Add →</button>
                            </li>
                        {% endfor %}
                    </ul>
                    <div data-empty-available
                         class="p-3 text-center text-xs text-slate-500 dark:text-slate-400"
                         {% if availableWorkers is not empty %}style="display:none"{% endif %}>
                        No other active workers.
                    </div>
                </div>
            </div>
            <div>
                <h3 class="text-xs font-semibold text-slate-500 uppercase mb-2 dark:text-slate-400">In sprint (drag to reorder)</h3>
                <div class="rounded border border-slate-200 dark:border-slate-700">
                    <ul data-in-sprint class="divide-y divide-slate-100 dark:divide-slate-700">
                        {% for sw in sprintWorkers %}
                            <li class="flex items-center gap-2 px-3 py-2 border-b bg-white last:border-b-0 dark:bg-slate-800 dark:border-slate-700"
                                data-sw-id="{{ sw.id }}"
                                data-worker-id="{{ sw.workerId }}">
                                <span class="handle cursor-grab text-slate-400 select-none dark:text-slate-500">&#8801;</span>
                                <span class="flex-1">{{ sw.workerName }}</span>
                                <input type="number" step="0.05" min="0" max="1"
                                       value="{{ fmt_rtb(sw.rtb) }}"
                                       data-rtb
                                       class="w-20 rounded border border-slate-300 px-2 py-1 font-mono text-sm 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">
                                <button type="button" data-remove class="text-sm text-red-600 hover:underline dark:text-red-400">Remove</button>
                            </li>
                        {% endfor %}
                    </ul>
                    <div data-empty-sprint
                         class="p-3 text-center text-xs text-slate-500 dark:text-slate-400"
                         {% if sprintWorkers is not empty %}style="display:none"{% endif %}>
                        No workers assigned yet.
                    </div>
                </div>
            </div>
        </div>
        <p class="text-xs text-slate-500 dark:text-slate-400">
            RTB (Run-the-Business) is informational and does not reduce computed capacity.
        </p>
    </section>
</section>

<script src="/assets/js/sprint-settings.js" defer></script>
{% endblock %}