{% if backends %}
<div class="space-y-2">
    {% for name, backend in backends.items() %}
    <div
        class="flex flex-col sm:flex-row sm:items-center sm:justify-between p-2 rounded gap-2 {% if not backend.enabled %}bg-gray-100{% elif backend.status.connected %}bg-green-50{% else %}bg-red-50{% endif %}">
        <!-- Top row: name + toggle -->
        <div class="flex items-center justify-between sm:justify-start gap-2">
            <div class="flex items-center gap-2">
                <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>
                <span class="font-medium text-gray-800 {% if not backend.enabled %}opacity-50{% endif %}">{{ name }}</span>
                <span class="text-xs text-gray-500 {% if not backend.enabled %}opacity-50{% endif %}">({{ backend.backend_type }})</span>
            </div>
            <!-- Toggle visible on mobile next to name -->
            <div class="flex items-center gap-2 sm:hidden">
                <a href="/backends/{{ name }}/log"
                    class="text-xs px-1.5 py-0.5 bg-gray-100 hover:bg-gray-200 rounded text-gray-500"
                    title="SSH command log">Log</a>
                <button onclick="fetch('/backends/{{ name }}/toggle',{method:'POST'}).then(function(){location.reload()})"
                    class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none {% if backend.enabled %}bg-green-500{% else %}bg-gray-300{% endif %}"
                    title="{% if backend.enabled %}Disable{% else %}Enable{% endif %} {{ name }}">
                    <span class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out {% if backend.enabled %}translate-x-4{% else %}translate-x-0{% endif %}"></span>
                </button>
            </div>
        </div>
        <!-- Bottom row: status details -->
        <div class="flex items-center gap-2 sm:text-right flex-wrap">
            {% if not backend.enabled %}
            <span class="text-xs text-gray-400">Disabled</span>
            {% elif backend.status.connected %}
            {% if backend.status.cpus_user is not none and backend.status.cpus_idle is not none %}
            <span class="text-xs text-gray-600">Using <span class="font-medium text-blue-600">{{ backend.status.cpus_user }}</span> CPUs in {{ backend_job_counts.get(name, 0) }} jobs, <span class="font-medium">{{ backend.status.cpus_idle }}</span> available</span>
            {% else %}
            <span class="text-xs text-gray-500">{{ backend_job_counts.get(name, 0) }} jobs</span>
            {% endif %}
            {% if backend.status.disk_avail_bytes is not none and backend.status.disk_total_bytes %}
            {% set disk_used_pct = ((backend.status.disk_total_bytes - backend.status.disk_avail_bytes) * 100 / backend.status.disk_total_bytes) | round(0, 'floor') | int %}
            <span class="text-xs {% if disk_used_pct >= 90 %}text-red-600{% elif disk_used_pct >= 75 %}text-yellow-600{% else %}text-gray-600{% endif %}"
                title="Disk usage at {{ backend.status.disk_clone_dir }}">
                <span class="font-medium">{{ backend.status.disk_avail_bytes | disk_bytes }}</span> free ({{ disk_used_pct }}% used)
            </span>
            {% endif %}
            {% if backend.status.last_poll_duration_ms is not none %}
            <span
                class="text-xs font-mono {% if backend.status.last_poll_duration_ms > 5000 %}text-red-500{% elif backend.status.last_poll_duration_ms > 2000 %}text-yellow-600{% else %}text-gray-400{% endif %}"
                title="Poll duration">{{ backend.status.last_poll_duration_ms }}ms</span>
            {% endif %}
            {% if backend.status.last_poll %}
            <time class="text-xs text-gray-400 local-time" datetime="{{ backend.status.last_poll.isoformat() }}" data-format="time"></time>
            {% endif %}
            {% else %}
            <span class="text-sm text-red-700">Disconnected</span>
            {% if backend.status.last_poll_duration_ms is not none %}
            <span class="text-xs font-mono text-gray-400">{{ backend.status.last_poll_duration_ms
                }}ms</span>
            {% endif %}
            {% endif %}
            <!-- Log + Toggle visible on desktop -->
            <a href="/backends/{{ name }}/log"
                class="hidden sm:inline-block text-xs px-1.5 py-0.5 bg-gray-100 hover:bg-gray-200 rounded text-gray-500"
                title="SSH command log">Log</a>
            <button onclick="fetch('/backends/{{ name }}/toggle',{method:'POST'}).then(function(){location.reload()})"
                class="hidden sm:inline-flex relative h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none {% if backend.enabled %}bg-green-500{% else %}bg-gray-300{% endif %}"
                title="{% if backend.enabled %}Disable{% else %}Enable{% endif %} {{ name }}">
                <span class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out {% if backend.enabled %}translate-x-4{% else %}translate-x-0{% endif %}"></span>
            </button>
        </div>
    </div>
    {% if backend.enabled and backend.status.error %}
    <div class="ml-4 p-2 bg-red-100 rounded text-sm text-red-700 font-mono text-xs">
        {{ backend.status.error }}
    </div>
    {% endif %}
    {% endfor %}
</div>
{% else %}
<p class="text-sm text-gray-500">No backends configured</p>
{% endif %}