{% extends "layout.twig" %}

{% set errorMessages = {
    'name_required':    'Worker name is required.',
    'name_taken':       'That name is already in use.',
    'rtb_out_of_range': 'RTB must be between 0.0 and 1.0.',
    'db_error':         'Could not save. Try again.',
} %}
{% set flashMessages = {
    'created': 'Worker created.',
    'updated': 'Saved.',
    'noop':    'Nothing changed.',
} %}

{% block content %}
<section class="space-y-6">
    <div>
        <h1 class="text-2xl font-semibold tracking-tight">Workers</h1>
        <p class="text-slate-600 mt-1 text-sm max-w-prose dark:text-slate-400">
            Master data for the people tasks get assigned to. Workers are not the
            same as users — a worker doesn't have to ever sign in. To remove
            someone, toggle them inactive rather than deleting.
        </p>
    </div>

    {% if error and errorMessages[error] is defined %}
        <div class="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 %}
    {% if flash and flashMessages[flash] is defined %}
        <div class="rounded-md border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:bg-green-900 dark:border-green-800 dark:text-green-200">
            {{ flashMessages[flash] }}
        </div>
    {% endif %}

    <div class="rounded-lg border bg-white p-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">Add worker</h2>
        <form method="post" action="/workers" hx-boost="true" hx-target="body"
              class="mt-3 flex flex-wrap items-end gap-3">
            <input type="hidden" name="_csrf" value="{{ csrfToken }}">
            <label class="flex-1 min-w-[12rem]">
                <span class="text-xs text-slate-600 dark:text-slate-400">Name</span>
                <input name="name" type="text" required
                       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="w-36">
                <span class="text-xs text-slate-600 dark:text-slate-400">Default RTB (0–1)</span>
                <input name="default_rtb" type="number" min="0" max="1" step="0.05" value="0.00"
                       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>
            <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">
                Add
            </button>
        </form>
    </div>

    <div class="rounded-lg border bg-white overflow-hidden dark:bg-slate-800 dark:border-slate-700">
        {% if workers is empty %}
            <div class="p-8 text-center text-slate-500 text-sm dark:text-slate-400">No workers yet.</div>
        {% else %}
            <table class="min-w-full text-sm">
                <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-4 py-2 font-semibold">Name</th>
                        <th class="text-left px-4 py-2 font-semibold">Default RTB</th>
                        <th class="text-left px-4 py-2 font-semibold">Active</th>
                        <th class="text-right px-4 py-2 font-semibold">&nbsp;</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                    {% for w in workers %}
                        <tr class="{{ w.isActive ? '' : 'opacity-60' }}">
                            <form method="post" action="/workers/{{ w.id }}" hx-boost="true" hx-target="body" class="contents">
                                <input type="hidden" name="_csrf" value="{{ csrfToken }}">
                                <td class="px-4 py-2">
                                    <input name="name" type="text" required value="{{ w.name }}"
                                           class="w-full rounded-md border-slate-300 border shadow-sm px-2 py-1 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">
                                </td>
                                <td class="px-4 py-2 w-32">
                                    <input name="default_rtb" type="number" min="0" max="1" step="0.05"
                                           value="{{ fmt_rtb(w.defaultRtb) }}"
                                           class="w-full rounded-md border-slate-300 border shadow-sm px-2 py-1 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">
                                </td>
                                <td class="px-4 py-2">
                                    <label class="inline-flex items-center gap-2">
                                        <input name="is_active" type="checkbox" value="1" {{ w.isActive ? 'checked' : '' }}
                                               class="rounded border-slate-300 dark:border-slate-600">
                                        <span class="text-slate-600 dark:text-slate-400">active</span>
                                    </label>
                                </td>
                                <td class="px-4 py-2 text-right">
                                    <button type="submit"
                                            class="rounded-md border border-slate-300 bg-white text-slate-700 px-3 py-1 text-sm hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                                        Save
                                    </button>
                                </td>
                            </form>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
</section>
{% endblock %}