{# HTMX-replaceable queue body. POST /sources/add re-renders this when
   the form was submitted from /queue (dispatched server-side via
   HX-Current-URL); hx-target="#queue-body" + hx-swap="outerHTML" keeps
   the wrapping div in place for the next swap. #}
{% set status_colors = {
    'pending':     'bg-gray-100 text-gray-700',
    'pulled':      'bg-blue-100 text-blue-700',
    'transcribed': 'bg-yellow-100 text-yellow-700',
    'analyzed':    'bg-orange-100 text-orange-700',
    'accepted':    'bg-green-100 text-green-700',
    'published':   'bg-purple-100 text-purple-700',
    'failed':      'bg-red-100 text-red-700'
} %}
{% set domain_colors = {
    'development': 'bg-cyan-50 text-cyan-700 border-cyan-200',
    'content':     'bg-pink-50 text-pink-700 border-pink-200',
    'business':    'bg-amber-50 text-amber-700 border-amber-200',
    'homelab':     'bg-teal-50 text-teal-700 border-teal-200'
} %}
<div id="queue-body">

    {% set swap_target = "#queue-body" %}
    {% include "_add_to_queue_form.html" %}

    <!-- In-flight source list (pending / pulled / transcribed) -->
    {% if sources %}
    <div class="grid gap-3">
        {% for source in sources %}
        <a href="/sources/{{ source.id }}"
           class="block bg-white rounded-lg border border-gray-200 p-4 hover:border-indigo-400 hover:shadow-sm transition-all duration-150 group">
            <div class="flex items-start justify-between gap-4">
                <div class="flex-1 min-w-0">
                    <h3 class="font-semibold text-gray-900 group-hover:text-indigo-700 break-words">
                        {{ source.title }}
                    </h3>
                    <p class="text-xs text-gray-400 mt-0.5 break-all">{{ source.url }}</p>
                    {% if source.focus %}
                    <p class="text-xs text-gray-500 mt-1 italic break-words">Focus: {{ source.focus }}</p>
                    {% endif %}
                </div>
                <div class="flex flex-col items-end gap-1.5 flex-shrink-0">
                    <span class="text-xs px-2 py-0.5 rounded-full font-medium
                        {{ status_colors.get(source.status, 'bg-gray-100 text-gray-700') }}">
                        {{ source.status }}
                    </span>
                    <span class="text-xs px-2 py-0.5 rounded border font-medium
                        {{ domain_colors.get(source.domain, 'bg-gray-50 text-gray-600 border-gray-200') }}">
                        {{ source.domain }}
                    </span>
                    <span class="text-xs text-gray-400">{{ source.ingested_at }}</span>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-20 bg-white rounded-lg border border-dashed border-gray-300">
        <p class="text-gray-400 text-lg">Queue is empty.</p>
        <p class="text-gray-400 text-sm mt-1">Add a URL above to get started.</p>
    </div>
    {% endif %}
</div>