{% extends "_base.html" %}
{% set active_page = "leader" %}

{% block title %}Leader — TaskQ Admin{% endblock %}

{% block content %}
<h2 class="text-xl font-semibold tracking-tight mb-4">Maintenance Leader</h2>

{% if leader %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {# Identity card #}
    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg p-4">
        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Identity</h3>
        <dl class="space-y-2 text-sm">
            <div class="flex justify-between">
                <dt class="text-slate-500">Hostname</dt>
                <dd class="font-medium">{{ leader.hostname }}</dd>
            </div>
            <div class="flex justify-between">
                <dt class="text-slate-500">PID</dt>
                <dd class="font-mono text-xs">{{ leader.pid }}</dd>
            </div>
        </dl>
    </div>

    {# Status card #}
    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg p-4">
        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Status</h3>
        <dl class="space-y-2 text-sm">
            <div class="flex justify-between items-center">
                <dt class="text-slate-500">Watchdog</dt>
                <dd>
                    {% if watchdog_healthy is none %}
                    <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300">Unknown</span>
                    {% elif watchdog_healthy %}
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">
                        <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Healthy
                    </span>
                    {% else %}
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300">
                        <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span> Unhealthy
                    </span>
                    {% endif %}
                </dd>
            </div>
            <div class="flex justify-between">
                <dt class="text-slate-500">Elected</dt>
                <dd class="text-xs text-slate-500 whitespace-nowrap">{{ leader.elected_at }}</dd>
            </div>
        </dl>
    </div>

    {# Health card #}
    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg p-4">
        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Activity</h3>
        <dl class="space-y-2 text-sm">
            <div class="flex justify-between">
                <dt class="text-slate-500">Last Seen</dt>
                <dd class="text-xs text-slate-500 whitespace-nowrap">{{ leader.last_seen_at }}</dd>
            </div>
            <div class="flex justify-between">
                <dt class="text-slate-500">Worker Last Seen</dt>
                <dd class="text-xs text-slate-500 whitespace-nowrap">{{ leader.worker_last_seen }}</dd>
            </div>
        </dl>
    </div>
</div>
{% else %}
<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg p-12 text-center">
    <p class="text-slate-400 text-sm">No leader elected.</p>
</div>
{% endif %}
{% endblock %}