{% extends "base.html" %}
{% block content %}
<div class="p-4">
    <div class="flex items-center gap-2 mb-6">
        <a href="/board/_all" class="text-xl font-bold mr-2 hover:text-blue-400">📋 Kanban</a>
        <a href="/timeline/_all" class="text-xl font-bold mr-2 hover:text-blue-400">⏱ Timeline</a>
        <h1 class="text-xl font-bold mr-4 text-green-400">🌳 Arcs</h1>
        <a href="/arcs?sort={{ 'desc' if sort == 'asc' else 'asc' }}"
           class="text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600">
            {{ '↑ A-Z' if sort == 'asc' else '↓ Z-A' }}
        </a>
    </div>

    <!-- Legend -->
    <div class="flex items-center gap-3 mb-4 text-xs text-gray-400">
        <span>🔴 critical</span>
        <span>🟠 high</span>
        <span>🔵 medium</span>
        <span>⚪ low</span>
        <span class="ml-3 px-1.5 py-0.5 rounded bg-green-900 text-green-300">done</span>
        <span class="px-1.5 py-0.5 rounded bg-blue-900 text-blue-300">work</span>
        <span class="px-1.5 py-0.5 rounded bg-red-900 text-red-300">blocked</span>
        <span class="px-1.5 py-0.5 rounded bg-gray-700 text-gray-400">queue</span>
    </div>

    {% if arcs %}
    <div class="grid gap-3 max-w-4xl">
        {% for arc in arcs %}
        <a href="/arcs/{{ arc.id }}" class="block bg-gray-800 rounded-lg p-4 hover:bg-gray-750 hover:ring-1 hover:ring-blue-500 transition">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <span>{{ arc.priority_emoji }}</span>
                    <span class="font-semibold">{{ arc.title }}</span>
                    <span class="text-xs px-2 py-0.5 rounded-full
                        {% if arc.status == 'done' %}bg-green-800 text-green-200
                        {% elif arc.status == 'work' %}bg-blue-800 text-blue-200
                        {% elif arc.status == 'blocked' %}bg-red-800 text-red-200
                        {% else %}bg-gray-700 text-gray-300{% endif %}">
                        {{ arc.status }}
                    </span>
                </div>
                <div class="text-sm text-gray-400">
                    {{ arc.done_count }}/{{ arc.child_count }} done
                </div>
            </div>
            {% if arc.description %}
            <p class="text-sm text-gray-400 mt-1 truncate">{{ arc.description[:120] }}</p>
            {% endif %}
        </a>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-gray-500">No arcs found. Create items with tag "arc" to see them here.</p>
    {% endif %}
</div>
{% endblock %}