{# Add-to-queue form. Reused by /dashboard and /queue — the only
   difference between the two callers is the HTMX swap target, which the
   parent template sets via `{% set swap_target = "#…-body" %}` before
   including this partial. POST goes to /sources/add either way; the
   route inspects HX-Current-URL to pick the right body partial in its
   response. #}
<section class="bg-white rounded-lg shadow-sm p-5 mb-6">
    <div class="flex items-center justify-between mb-3">
        <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500">
            Add to queue
        </h3>
        <p class="text-xs text-gray-400">video on a known host (YouTube / Vimeo) → tower; otherwise treated as an article. YouTube /playlist?list=… fans out.</p>
    </div>

    {% if add_flash %}
    <div class="mb-3 px-3 py-2 rounded bg-green-50 border border-green-200 text-green-700 text-sm">
        ✓ {{ add_flash }}
    </div>
    {% endif %}
    {% if add_error %}
    <div class="mb-3 px-3 py-2 rounded bg-red-50 border border-red-200 text-red-700 text-sm">
        ✗ {{ add_error }}
    </div>
    {% endif %}

    <form hx-post="/sources/add"
          hx-target="{{ swap_target }}"
          hx-swap="outerHTML"
          class="grid grid-cols-1 md:grid-cols-12 gap-3 items-end">

        <div class="md:col-span-6">
            <label class="block text-xs font-medium text-gray-600 mb-1">URL</label>
            <input type="url" name="url" required autofocus
                   placeholder="https://…"
                   class="text-sm border border-gray-300 rounded px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-indigo-400 w-full">
        </div>

        <div class="md:col-span-2">
            <label class="block text-xs font-medium text-gray-600 mb-1">Domain</label>
            <select name="domain"
                    class="text-sm border border-gray-300 rounded px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-indigo-400 w-full">
                {% for d in domains %}
                <option value="{{ d }}" {% if d == "development" %}selected{% endif %}>{{ d }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="md:col-span-3">
            <label class="block text-xs font-medium text-gray-600 mb-1">Title <span class="text-gray-400">(optional)</span></label>
            <input type="text" name="title"
                   class="text-sm border border-gray-300 rounded px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-indigo-400 w-full">
        </div>

        <div class="md:col-span-1">
            <button type="submit"
                    class="w-full px-4 py-1.5 bg-indigo-600 text-white text-sm font-medium rounded hover:bg-indigo-700 transition-colors">
                Add
            </button>
        </div>

        <div class="md:col-span-12">
            <label class="block text-xs font-medium text-gray-600 mb-1">Focus <span class="text-gray-400">(optional — narrows the extraction prompt)</span></label>
            <input type="text" name="focus"
                   class="text-sm border border-gray-300 rounded px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-indigo-400 w-full">
        </div>
    </form>
</section>