{# HTMX-replaceable dashboard body. POST /sources/add re-renders this
   partial; hx-target="#dashboard-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="dashboard-body">

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

    <!-- Pipeline overview -->
    <section class="bg-white rounded-lg shadow-sm p-5 mb-6">
        <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500 mb-3">
            Pipeline
        </h3>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
            {% for status in statuses_in_order %}
            <a href="/?status={{ status }}"
               class="block rounded-lg border border-gray-200 hover:border-indigo-400 hover:shadow-sm transition-all px-3 py-3">
                <div class="text-2xl font-bold text-gray-900 leading-none">{{ counts.get(status, 0) }}</div>
                <div class="mt-1.5">
                    <span class="text-xs px-2 py-0.5 rounded-full font-medium
                        {{ status_colors.get(status, 'bg-gray-100 text-gray-700') }}">
                        {{ status }}
                    </span>
                </div>
            </a>
            {% endfor %}
        </div>
    </section>

    <!-- Settings snapshot + Recent activity, side by side on wide screens -->
    <div class="grid lg:grid-cols-3 gap-6">

        <!-- Settings snapshot -->
        <section class="bg-white rounded-lg shadow-sm p-5 lg:col-span-1">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500">
                    Settings
                </h3>
                <a href="/settings" class="text-xs text-indigo-600 hover:text-indigo-700 font-medium">
                    edit →
                </a>
            </div>

            <dl class="text-sm space-y-2">
                <div class="flex justify-between items-center">
                    <dt class="text-gray-600">Transcription</dt>
                    <dd>
                        {% if settings.transcription_enabled %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700 font-medium">enabled</span>
                        {% else %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-gray-200 text-gray-600 font-medium">paused</span>
                        {% endif %}
                    </dd>
                </div>
                <div class="flex justify-between items-center">
                    <dt class="text-gray-600">  active window</dt>
                    <dd class="text-gray-800 font-mono text-xs">
                        {% if settings.transcription_active_hours_start or settings.transcription_active_hours_end %}
                        {{ settings.transcription_active_hours_start or "—" }} – {{ settings.transcription_active_hours_end or "—" }}
                        {% else %}
                        always
                        {% endif %}
                    </dd>
                </div>
                <div class="flex justify-between items-center">
                    <dt class="text-gray-600">  GPU jobs</dt>
                    <dd class="text-gray-800 font-mono text-xs">{{ settings.transcription_max_concurrent_gpu_jobs }}</dd>
                </div>
                <div class="flex justify-between items-center">
                    <dt class="text-gray-600">  max items/run</dt>
                    <dd class="text-gray-800 font-mono text-xs">{{ settings.transcription_max_items_per_run }}</dd>
                </div>

                <div class="border-t border-gray-100 pt-2 mt-2"></div>

                <div class="flex justify-between items-center">
                    <dt class="text-gray-600">Extraction</dt>
                    <dd>
                        {% if settings.extraction_enabled %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700 font-medium">enabled</span>
                        {% else %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-gray-200 text-gray-600 font-medium">paused</span>
                        {% endif %}
                    </dd>
                </div>
                <div class="flex justify-between items-center">
                    <dt class="text-gray-600">  active window</dt>
                    <dd class="text-gray-800 font-mono text-xs">
                        {% if settings.extraction_active_hours_start or settings.extraction_active_hours_end %}
                        {{ settings.extraction_active_hours_start or "—" }} – {{ settings.extraction_active_hours_end or "—" }}
                        {% else %}
                        always
                        {% endif %}
                    </dd>
                </div>
                <div class="flex justify-between items-center">
                    <dt class="text-gray-600">  max items/run</dt>
                    <dd class="text-gray-800 font-mono text-xs">{{ settings.extraction_max_items_per_run }}</dd>
                </div>
            </dl>

            <p class="text-xs text-gray-400 mt-4">
                updated {{ settings.updated_at }}
            </p>
        </section>

        <!-- Recent activity -->
        <section class="bg-white rounded-lg shadow-sm p-5 lg:col-span-2">
            <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500 mb-3">
                Recent activity
            </h3>
            {% if recent %}
            <div class="divide-y divide-gray-100">
                {% for source in recent %}
                <a href="/sources/{{ source.id }}"
                   class="flex items-start justify-between gap-3 py-2.5 hover:bg-gray-50 -mx-2 px-2 rounded transition-colors">
                    {# Wrap long titles/URLs instead of truncating. min-w-0
                       keeps the flex child shrinkable so badges stay aligned. #}
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-medium text-gray-900 break-words">{{ source.title }}</p>
                        <p class="text-xs text-gray-400 break-all">{{ source.url }}</p>
                    </div>
                    <div class="flex flex-col items-end gap-1 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>
                </a>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-sm text-gray-400 py-8 text-center">No sources yet.</p>
            {% endif %}
        </section>
    </div>
</div>