{% from '_status.html' import status_dot, status_bar %}
{#
  Landing-page body: active runs first (that is what the page is for),
  backends underneath. Rendered standalone by /overview/stream, so it must
  not depend on anything overview.html sets up beyond the context keys.
#}

{#
  Activity heatmap. Indigo rather than GitHub's green: in this app green
  already means "completed", and indigo is what running work is drawn in
  everywhere else — so shade reads as "how much ran", not "how much passed".
#}
{% set LEVELS = [
    'bg-gray-100',
    'bg-indigo-200',
    'bg-indigo-400',
    'bg-indigo-600',
    'bg-indigo-800',
] %}
<section class="mb-8">
    <div class="flex items-baseline justify-between mb-3">
        <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">
            Activity · last {{ activity.window_days }} days
        </h2>
        <span class="text-xs text-gray-400" title="Runs are deleted after {{ activity.window_days }} days, so this is the full retained history">
            CPU-hours per day
        </span>
    </div>

    <div class="bg-white rounded-lg shadow-md p-4 flex flex-col lg:flex-row lg:items-center gap-6">
        <!-- Grid -->
        <div class="overflow-x-auto">
            <div class="inline-flex flex-col gap-1">
                <!-- Month labels. Absolutely positioned: a margin-based flow
                     would drift, since each label's own width shifts the next. -->
                <div class="relative h-4 ml-8" style="width: {{ activity.weeks|length * 20 }}px">
                    {% for col, label in activity.month_labels %}
                    <span class="absolute top-0 text-xs text-gray-400 leading-4"
                        style="left: {{ col * 20 }}px">{{ label }}</span>
                    {% endfor %}
                </div>
                <div class="flex gap-1">
                    <!-- Weekday labels (Mon/Wed/Fri, like GitHub) -->
                    <div class="flex flex-col gap-1 w-7 flex-shrink-0">
                        {% for label in ['Mon', '', 'Wed', '', 'Fri', '', ''] %}
                        <span class="h-4 text-xs text-gray-400 leading-4">{{ label }}</span>
                        {% endfor %}
                    </div>
                    <!-- One column per week, one row per weekday -->
                    <div class="flex gap-1">
                        {% for week in activity.weeks %}
                        <div class="flex flex-col gap-1">
                            {% for day in week %}
                            {% if day %}
                            <div class="w-4 h-4 rounded-sm {{ LEVELS[day.level] }}"
                                title="{{ day.day.strftime('%a %d %b') }} — {% if day.runs %}{{ '%.1f'|format(day.cpu_hours) }} CPU-hours, {{ day.runs }} run{{ '' if day.runs == 1 else 's' }}{% else %}idle{% endif %}"></div>
                            {% else %}
                            {# Before the window starts, or later this week. #}
                            <div class="w-4 h-4 rounded-sm bg-transparent"></div>
                            {% endif %}
                            {% endfor %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <!-- Legend -->
                <div class="flex items-center gap-1 ml-8 mt-1 text-xs text-gray-400">
                    <span class="mr-1">Less</span>
                    {% for cls in LEVELS %}
                    <span class="w-4 h-4 rounded-sm {{ cls }}"></span>
                    {% endfor %}
                    <span class="ml-1">More</span>
                </div>
            </div>
        </div>

        <!-- Headline figures, pushed flush right so the strip uses its width
             deliberately rather than trailing off into blank card. -->
        <div class="flex flex-row lg:flex-col gap-6 lg:gap-3 lg:ml-auto lg:border-l lg:border-gray-100 lg:pl-6 lg:pr-2">
            <div>
                <div class="text-2xl font-semibold text-indigo-600 font-mono">
                    {{ '%.0f'|format(activity.total_cpu_hours) }}
                </div>
                <div class="text-xs text-gray-500">CPU-hours</div>
            </div>
            <div>
                <div class="text-2xl font-semibold text-gray-700 font-mono">
                    {{ activity.active_days }}<span class="text-base text-gray-400">/{{ activity.window_days }}</span>
                </div>
                <div class="text-xs text-gray-500">Active days</div>
            </div>
            {% if activity.busiest %}
            <div>
                <div class="text-sm font-medium text-gray-700">
                    {{ activity.busiest.day.strftime('%d %b') }}
                </div>
                <div class="text-xs text-gray-500">
                    Busiest · {{ '%.0f'|format(activity.busiest.cpu_hours) }} CPU-h
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</section>

<!-- Active runs -->
<section class="mb-8">
    <div class="flex items-baseline justify-between mb-3">
        <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">
            {% if active_runs %}Active runs{% else %}Recent runs{% endif %}
        </h2>
        <a href="/runs" class="text-xs text-blue-600 hover:text-blue-800">All runs →</a>
    </div>

    {% set cards = active_runs if active_runs else recent_runs %}
    {% if cards %}
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        {% for run in cards %}
        {% set is_active = run.status.value in ('running', 'pending') %}
        <a href="/runs/{{ run.id }}"
            class="block bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-4 border-l-4
            {% if run.status.value == 'running' %}border-indigo-500
            {% elif run.status.value == 'pending' %}border-gray-300
            {% elif run.status.value == 'completed' %}border-green-500
            {% elif run.status.value == 'failed' %}border-red-500
            {% else %}border-gray-300{% endif %}
            {% if not is_active %}opacity-75 hover:opacity-100{% endif %}">

            <!-- Source chip + status -->
            <div class="flex items-center justify-between gap-2 mb-1">
                {% if run.source_name %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-50 text-blue-700 text-xs font-medium truncate"
                    title="Source: {{ run.source_name }}">
                    <svg class="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path></svg>
                    {{ run.source_name }}
                </span>
                {% else %}
                <span class="text-xs text-gray-400 italic">no source</span>
                {% endif %}
                <span class="inline-flex items-center gap-1.5 px-2 py-0.5 text-xs font-medium rounded-full flex-shrink-0
                    {% if run.status.value == 'running' %}bg-indigo-100 text-indigo-700
                    {% elif run.status.value == 'pending' %}bg-gray-100 text-gray-600
                    {% elif run.status.value == 'completed' %}bg-green-100 text-green-700
                    {% elif run.status.value == 'failed' %}bg-red-100 text-red-700
                    {% else %}bg-gray-100 text-gray-600{% endif %}">
                    {{ status_dot(run.status.value) }}
                    {{ run.status.value }}
                </span>
            </div>

            <!-- Workflow -->
            <h3 class="text-base font-semibold text-gray-800 truncate" title="{{ run.workflow_name }}">
                {{ run.display_name }}
            </h3>

            <!-- Progress -->
            <div class="mt-3 flex items-center gap-2">
                {{ status_bar(run.status_counts, 'flex-1 h-2') }}
                <span class="text-xs text-gray-600 font-mono flex-shrink-0">
                    {{ run.progress[0] }}/{{ run.progress[1] }}
                </span>
            </div>

            <!-- Task breakdown (only what is non-zero) -->
            {% set c = run.status_counts %}
            <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-gray-600">
                {% if c.get('running', 0) %}
                <span class="inline-flex items-center gap-1">{{ status_dot('running') }}{{ c.get('running') }} running</span>
                {% endif %}
                {% set waiting = c.get('queued', 0) + c.get('submitted', 0) %}
                {% if waiting %}
                <span class="inline-flex items-center gap-1">{{ status_dot('queued') }}{{ waiting }} queued</span>
                {% endif %}
                {% if c.get('pending', 0) %}
                <span class="inline-flex items-center gap-1">{{ status_dot('pending') }}{{ c.get('pending') }} waiting</span>
                {% endif %}
                {% if c.get('failed', 0) or c.get('dep_failed', 0) %}
                <span class="inline-flex items-center gap-1 text-red-600">{{ status_dot('failed') }}{{ c.get('failed', 0) + c.get('dep_failed', 0) }} failed</span>
                {% endif %}
            </div>

            <!-- Footer: backend, elapsed, cpu hours -->
            <div class="mt-3 pt-2 border-t border-gray-100 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-gray-500">
                <span class="font-mono">{{ run.backend_name }}</span>
                <span class="text-gray-300">·</span>
                <time class="local-elapsed" datetime="{{ run.created_at.isoformat() }}"></time>
                {% if run.total_cpu_hours > 0 %}
                <span class="text-gray-300">·</span>
                <span class="font-mono" title="CPU hours consumed">
                    {% if run.total_cpu_hours >= 1 %}{{ "%.1f"|format(run.total_cpu_hours) }} CPU-h
                    {% else %}{{ "%.0f"|format(run.total_cpu_hours * 60) }} CPU-min{% endif %}
                </span>
                {% endif %}
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="bg-white rounded-lg shadow-md px-6 py-10 text-center">
        <svg class="mx-auto h-10 w-10 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">Nothing has run yet</h3>
        <p class="mt-1 text-sm text-gray-500">
            Pick a workflow on the <a href="/sources" class="text-blue-600 hover:text-blue-800">Sources</a> page to start one.
        </p>
    </div>
    {% endif %}
</section>

<!-- Backends -->
<section>
    <div class="flex items-baseline justify-between mb-3">
        <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Backends</h2>
        <a href="/backends" class="text-xs text-blue-600 hover:text-blue-800">Details →</a>
    </div>

    {% if backends %}
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        {% for name, backend in backends.items() %}
        {% set u = backend_usage.get(name, {}) %}
        {% set q = backend.status.cluster_info.user_quota if backend.status.cluster_info else None %}
        <div class="bg-white rounded-lg shadow-md p-4 {% if not backend.enabled %}opacity-60{% endif %}">
            <!-- Header -->
            <div class="flex items-center justify-between gap-2 mb-3">
                <div class="flex items-center gap-2 min-w-0">
                    <span class="w-2.5 h-2.5 rounded-full flex-shrink-0
                        {% if not backend.enabled %}bg-gray-400
                        {% elif backend.status.connected %}bg-green-500
                        {% else %}bg-red-500{% endif %}"></span>
                    <a href="/backends" class="font-semibold text-gray-800 truncate hover:text-blue-700">{{ name }}</a>
                </div>
                <span class="text-xs text-gray-500 flex-shrink-0">{{ backend.backend_type }}</span>
            </div>

            {% if not backend.enabled %}
            <p class="text-sm text-gray-400">Disabled</p>
            {% elif not backend.status.connected %}
            <p class="text-sm text-red-700">Disconnected</p>
            {% if backend.status.error %}
            <p class="mt-1 text-xs font-mono text-red-600 truncate" title="{{ backend.status.error }}">{{ backend.status.error }}</p>
            {% endif %}
            {% else %}

            <!-- My usage -->
            <div class="grid grid-cols-3 gap-2 text-center">
                <div>
                    <div class="text-xl font-semibold text-indigo-600 font-mono">{{ u.get('cpus', 0) }}</div>
                    <div class="text-xs text-gray-500">CPUs running</div>
                </div>
                <div>
                    <div class="text-xl font-semibold {% if u.get('cpus_queued', 0) %}text-yellow-600{% else %}text-gray-400{% endif %} font-mono">{{ u.get('cpus_queued', 0) }}</div>
                    <div class="text-xs text-gray-500">CPUs queued</div>
                </div>
                <div>
                    <div class="text-xl font-semibold text-gray-700 font-mono">
                        {{ u.get('jobs', 0) }}{% if q and q.jobs_max %}<span class="text-sm text-gray-400">/{{ q.jobs_max }}</span>{% endif %}
                    </div>
                    <div class="text-xs text-gray-500">My jobs</div>
                </div>
            </div>

            <!-- Cluster + disk meters -->
            <div class="mt-4 space-y-2">
                {% if backend.status.cpus_total %}
                {% set cpus_busy = backend.status.cpus_total - backend.status.cpus_idle %}
                {% set cluster_pct = (cpus_busy * 100 / backend.status.cpus_total) | round(0, 'floor') | int %}
                <div>
                    <div class="flex items-baseline justify-between text-xs mb-0.5">
                        <span class="text-gray-500">Cluster</span>
                        <span class="text-gray-600 font-mono">
                            {{ cluster_pct }}% busy · <span class="font-medium">{{ backend.status.cpus_idle }}</span> CPUs free
                        </span>
                    </div>
                    <div class="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden">
                        <div class="h-full {% if cluster_pct >= 95 %}bg-red-500{% elif cluster_pct >= 80 %}bg-yellow-500{% else %}bg-green-500{% endif %}"
                            style="width: {{ cluster_pct }}%"></div>
                    </div>
                </div>
                {% endif %}

                {% if backend.status.disk_total_bytes and backend.status.disk_avail_bytes is not none %}
                {% set disk_pct = ((backend.status.disk_total_bytes - backend.status.disk_avail_bytes) * 100 / backend.status.disk_total_bytes) | round(0, 'floor') | int %}
                <div>
                    <div class="flex items-baseline justify-between text-xs mb-0.5">
                        <span class="text-gray-500">Disk</span>
                        <span class="text-gray-600 font-mono" title="At {{ backend.status.disk_clone_dir }}">
                            {{ disk_pct }}% used · <span class="font-medium">{{ backend.status.disk_avail_bytes | disk_bytes }}</span> free
                        </span>
                    </div>
                    <div class="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden">
                        <div class="h-full {% if disk_pct >= 90 %}bg-red-500{% elif disk_pct >= 75 %}bg-yellow-500{% else %}bg-blue-500{% endif %}"
                            style="width: {{ disk_pct }}%"></div>
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- Fair-share / account, when Slurm reports them -->
            {% if q and (q.fair_share is not none or q.account) %}
            <div class="mt-3 pt-2 border-t border-gray-100 flex flex-wrap items-center gap-x-3 text-xs text-gray-500">
                {% if q.fair_share is not none %}
                <span title="Slurm fair-share priority weight (0.0-1.0, higher = better)">
                    fair-share
                    <span class="font-mono font-medium {% if q.fair_share < 0.3 %}text-red-600{% elif q.fair_share < 0.5 %}text-yellow-700{% else %}text-green-700{% endif %}">{{ '%.2f'|format(q.fair_share) }}</span>
                </span>
                {% endif %}
                {% if q.account %}
                <span>account <span class="font-mono text-gray-600">{{ q.account }}</span></span>
                {% endif %}
            </div>
            {% endif %}
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="bg-white rounded-lg shadow-md px-6 py-8 text-center">
        <p class="text-sm text-gray-500">No backends configured</p>
    </div>
    {% endif %}
</section>