{% extends "base.html" %}

{% block title %}{% if page_title %}{{ page_title }} — {% endif %}second-brain{% endblock %}

{% block content %}
<div class="mb-6 flex items-center justify-between">
    <h2 class="text-2xl font-semibold text-gray-800">
        {{ page_title or "Sources" }}
        <span class="text-base font-normal text-gray-500 ml-2">({{ sources|length }})</span>
    </h2>
</div>

<!-- Filters -->
<form method="get" action="/" class="bg-white rounded-lg shadow-sm p-4 mb-6 flex flex-wrap gap-4 items-end">
    <div>
        <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">
            <option value="">All domains</option>
            {% for d in domains %}
            <option value="{{ d }}" {% if selected_domain == d %}selected{% endif %}>{{ d }}</option>
            {% endfor %}
        </select>
    </div>
    <div>
        <label class="block text-xs font-medium text-gray-600 mb-1">Status</label>
        <select name="status" class="text-sm border border-gray-300 rounded px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-indigo-400">
            <option value="">All statuses</option>
            {% for s in statuses %}
            <option value="{{ s }}" {% if selected_status == s %}selected{% endif %}>{{ s }}</option>
            {% endfor %}
        </select>
    </div>
    <button type="submit"
            class="px-4 py-1.5 bg-indigo-600 text-white text-sm font-medium rounded hover:bg-indigo-700 transition-colors">
        Filter
    </button>
    <a href="/" class="px-4 py-1.5 bg-gray-100 text-gray-700 text-sm font-medium rounded hover:bg-gray-200 transition-colors">
        Clear
    </a>
</form>

<!-- Source list -->
{% if sources %}
<div class="grid gap-3">
    {% for source in sources %}
    {% 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'
    } %}
    <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">
            {# min-w-0 keeps this flex child shrinkable; break-words / break-all
               make the text wrap inside instead of forcing the parent wider. #}
            <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">No sources found.</p>
    <p class="text-gray-400 text-sm mt-1">Run <code class="bg-gray-100 px-1 rounded">second-brain add &lt;url&gt;</code> to queue one.</p>
</div>
{% endif %}
{% endblock %}