<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="30">
    <title>Turnos · {{ nest_name }}</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: system-ui, -apple-system, sans-serif;
            background: #111827;
            color: #f3f4f6;
            min-height: 100vh;
            padding: 1rem;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0 1rem;
            border-bottom: 1px solid #374151;
            margin-bottom: 1rem;
        }

        h1 {
            font-size: 1.25rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nest-badge {
            font-size: 0.7rem;
            background: #374151;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            color: #9ca3af;
        }

        .total {
            font-size: 2rem;
            font-weight: 700;
            color: #60a5fa;
        }

        .total small {
            font-size: 0.8rem;
            color: #9ca3af;
            font-weight: 400;
        }

        /* Pipeline columns */
        .pipeline {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .column {
            background: #1f2937;
            border-radius: 8px;
            overflow: hidden;
        }

        .column-header {
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid;
        }

        .column-count {
            font-size: 1rem;
            font-weight: 700;
        }

        .column-items {
            padding: 0.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            max-height: 70vh;
            overflow-y: auto;
        }

        /* Individual request card */
        .card {
            background: #111827;
            border-radius: 6px;
            padding: 0.5rem 0.6rem;
            font-size: 0.75rem;
            border-left: 3px solid;
        }

        .card-id {
            font-weight: 600;
            color: #9ca3af;
            font-size: 0.65rem;
        }

        .card-vet {
            color: #60a5fa;
            font-weight: 500;
        }

        .card-petowner {
            color: #d1d5db;
        }

        .card-meta {
            font-size: 0.65rem;
            color: #6b7280;
            margin-top: 0.25rem;
        }

        /* Age indicators */
        .card.old {
            background: #450a0a;
        }
        .card.warn {
            background: #422006;
        }

        /* Indicators */
        .indicator {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 0.25rem;
        }
        .indicator.paid { background: #22c55e; }
        .indicator.scheduled { background: #3b82f6; }

        /* Empty state */
        .empty {
            text-align: center;
            color: #6b7280;
            padding: 2rem;
            font-size: 0.8rem;
        }

        /* Footer */
        footer {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #374151;
            font-size: 0.7rem;
            color: #6b7280;
            display: flex;
            justify-content: space-between;
        }

        .refresh-notice {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .view-toggle a {
            color: #6b7280;
            text-decoration: none;
            font-size: 0.8rem;
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
        }
        .view-toggle a:hover { background: #374151; }
        .view-toggle a.active { background: #374151; color: #f3f4f6; }
    </style>
</head>
<body>
    <header>
        <h1>
            Turnos
            <span class="nest-badge">{{ nest_name }}</span>
        </h1>
        <div class="header-right">
            <div class="view-toggle">
                <a href="?view=pipeline" class="active">Pipeline</a>
                <a href="?view=list">List</a>
            </div>
            <div class="total">
                {{ total }}
                <small>activos</small>
            </div>
        </div>
    </header>

    {% if total == 0 %}
    <div class="empty">
        No hay solicitudes activas
    </div>
    {% else %}
    <div class="pipeline">
        {% for state in active_states %}
        {% set info = states.get(state, ('?', '#888', 99)) %}
        {% set items = by_state.get(state, []) %}
        <div class="column">
            <div class="column-header" style="border-color: {{ info[1] }}; color: {{ info[1] }};">
                <span>{{ info[0] }}</span>
                <span class="column-count">{{ items|length }}</span>
            </div>
            <div class="column-items">
                {% for item in items %}
                <div class="card {{ item.age_class }}" style="border-color: {{ info[1] }};">
                    <div class="card-id">#{{ item.id }}</div>
                    <div class="card-vet">{{ item.vet }}</div>
                    <div class="card-petowner">{{ item.petowner }}</div>
                    <div class="card-meta">
                        {% if item.is_paid %}<span class="indicator paid" title="Pagado"></span>{% endif %}
                        {% if item.is_scheduled %}<span class="indicator scheduled" title="Coordinado"></span>{% endif %}
                        {{ item.age_hours }}h
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <footer>
        <span class="refresh-notice">Auto-refresh 30s</span>
        <span><a href="/health" style="color: #6b7280;">/health</a></span>
    </footer>
</body>
</html>
