{% extends 'layout.twig' %}

{% block title %}{{ category.slug }} — Category — IRDB{% endblock %}

{% block content %}
<div class="mx-auto max-w-3xl"
     x-data="decayPreview"
     data-decay-fn="{{ category.decay_function }}"
     data-decay-param="{{ category.decay_param }}">
    <a href="/app/categories" class="text-sm text-slate-500 hover:underline dark:text-slate-400">← Back to categories</a>
    <h1 class="mt-3 text-2xl font-semibold tracking-tight font-mono">{{ category.slug }}</h1>

    <form method="post" action="/app/categories/{{ category.id }}" class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <div class="grid grid-cols-1 gap-3 md:grid-cols-2 text-sm">
            <div>
                <label for="cat-slug" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Slug</label>
                <input type="text" id="cat-slug" name="slug" value="{{ category.slug }}" {% if not can_write %}readonly{% endif %}
                       class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 font-mono dark:border-slate-700 dark:bg-slate-950">
            </div>
            <div>
                <label for="cat-name" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Name</label>
                <input type="text" id="cat-name" name="name" value="{{ category.name }}" {% if not can_write %}readonly{% endif %}
                       class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 dark:border-slate-700 dark:bg-slate-950">
            </div>
            <div class="md:col-span-2">
                <label for="cat-desc" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Description</label>
                <input type="text" id="cat-desc" name="description" value="{{ category.description|default('') }}" {% if not can_write %}readonly{% endif %}
                       class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 dark:border-slate-700 dark:bg-slate-950">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-600 dark:text-slate-400">Decay function</label>
                <div class="mt-1 space-y-1">
                    <label class="flex items-center gap-2 text-sm">
                        <input type="radio" name="decay_function" value="linear" x-model="fn" {% if not can_write %}disabled{% endif %}>
                        linear (days to zero)
                    </label>
                    <label class="flex items-center gap-2 text-sm">
                        <input type="radio" name="decay_function" value="exponential" x-model="fn" {% if not can_write %}disabled{% endif %}>
                        exponential (half-life days)
                    </label>
                </div>
            </div>
            <div>
                <label for="cat-param" class="block text-xs font-medium text-slate-600 dark:text-slate-400">
                    <span x-text="paramLabel"></span>
                </label>
                <input type="number" id="cat-param" name="decay_param" step="0.1" min="0.1" x-model.number="param" {% if not can_write %}readonly{% endif %}
                       class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 dark:border-slate-700 dark:bg-slate-950">
            </div>
            <div class="md:col-span-2">
                <label class="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-400">
                    <input type="checkbox" name="is_active" value="1" {% if category.is_active %}checked{% endif %} {% if not can_write %}disabled{% endif %}>
                    active
                </label>
                <p class="mt-1 text-xs text-slate-400">Soft-delete a referenced category by unchecking "active".</p>
            </div>
        </div>

        <section class="mt-6">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Decay preview (0–60 days)</h2>
            <svg viewBox="0 0 660 240" class="mt-2 w-full max-w-xl rounded border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950">
                <g class="stroke-slate-200 dark:stroke-slate-800" stroke-width="1">
                    <line x1="40" y1="10"  x2="640" y2="10"/>
                    <line x1="40" y1="60"  x2="640" y2="60"/>
                    <line x1="40" y1="110" x2="640" y2="110"/>
                    <line x1="40" y1="160" x2="640" y2="160"/>
                </g>
                <line x1="40" y1="210" x2="640" y2="210" class="stroke-slate-300 dark:stroke-slate-700" stroke-width="1"/>
                <line x1="40" y1="10"  x2="40"  y2="210" class="stroke-slate-300 dark:stroke-slate-700" stroke-width="1"/>
                <g class="stroke-slate-300 dark:stroke-slate-700" stroke-width="1">
                    <line x1="36" y1="10"  x2="40" y2="10"/>
                    <line x1="36" y1="60"  x2="40" y2="60"/>
                    <line x1="36" y1="110" x2="40" y2="110"/>
                    <line x1="36" y1="160" x2="40" y2="160"/>
                    <line x1="36" y1="210" x2="40" y2="210"/>
                    <line x1="40"  y1="210" x2="40"  y2="214"/>
                    <line x1="190" y1="210" x2="190" y2="214"/>
                    <line x1="340" y1="210" x2="340" y2="214"/>
                    <line x1="490" y1="210" x2="490" y2="214"/>
                    <line x1="640" y1="210" x2="640" y2="214"/>
                </g>
                <g font-size="10" text-anchor="end" class="fill-slate-500 dark:fill-slate-400">
                    <text x="34" y="13">1.0</text>
                    <text x="34" y="63">0.75</text>
                    <text x="34" y="113">0.5</text>
                    <text x="34" y="163">0.25</text>
                    <text x="34" y="213">0</text>
                </g>
                <g font-size="10" text-anchor="middle" class="fill-slate-500 dark:fill-slate-400">
                    <text x="40"  y="226">0</text>
                    <text x="190" y="226">15</text>
                    <text x="340" y="226">30</text>
                    <text x="490" y="226">45</text>
                    <text x="640" y="226">60</text>
                </g>
                <text x="340" y="238" font-size="10" text-anchor="middle" class="fill-slate-500 dark:fill-slate-400">age (days)</text>
                <path :d="path()" stroke="currentColor" class="text-indigo-500" fill="none" stroke-width="2"/>
            </svg>
        </section>

        {% if can_write %}
            <div class="mt-6 flex justify-end">
                <button type="submit" class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-500">Save</button>
            </div>
        {% endif %}
    </form>
</div>
{% endblock %}
