{% for category_name, category_services in services_by_category.items() %}
{% set cat_info = categories.get(category_name, {}) %}
<div class="category-section mb-3">
    <div class="flex items-center gap-2 mb-2 cursor-pointer select-none" onclick="toggleCategory(this)">
        <svg class="w-3 h-3 text-gray-500 collapse-icon transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        <span class="w-3 h-3 rounded-full
            {% if cat_info.color == 'blue' %}bg-blue-500
            {% elif cat_info.color == 'purple' %}bg-purple-500
            {% elif cat_info.color == 'amber' %}bg-amber-500
            {% elif cat_info.color == 'emerald' %}bg-emerald-500
            {% elif cat_info.color == 'cyan' %}bg-cyan-500
            {% else %}bg-gray-500{% endif %}"></span>
        <h3 class="text-sm font-semibold text-gray-300">{{ category_name }}</h3>
        <span class="text-xs text-gray-500">({{ category_services | length }})</span>
    </div>

    <div class="collapsible-content">
        <div class="service-grid">
            {% for service in category_services %}
            {% set status = services_status.get(service.name) %}
            <a href="{{ service.url }}" target="_blank"
               class="service-card card rounded-lg p-2 flex items-center gap-2 hover:scale-[1.02] transition-transform"
               data-name="{{ service.name }}"
               data-category="{{ category_name }}">
                <!-- Status dot -->
                <span class="status-dot w-2 h-2 rounded-full flex-shrink-0
                    {% if status and status.status == 'online' %}bg-emerald-500 status-online
                    {% elif status and status.status == 'degraded' %}bg-amber-500 status-pulse
                    {% else %}bg-red-500 status-offline{% endif %}"></span>
                
                <!-- Icon -->
                <svg class="svc-icon text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">{{ get_service_icon(service.icon) | safe }}</svg>
                
                <!-- Name and response time -->
                <div class="flex-1 min-w-0">
                    <div class="text-xs font-medium truncate">{{ service.name }}</div>
                    {% if status and status.response_time_ms %}
                    <div class="text-[10px] {% if status.response_time_ms < 100 %}response-fast{% elif status.response_time_ms < 500 %}response-medium{% else %}response-slow{% endif %}">
                        {{ status.response_time_ms }}ms
                    </div>
                    {% elif status and status.status == 'offline' %}
                    <div class="text-[10px] text-red-400">Offline</div>
                    {% endif %}
                </div>
                
                <!-- Critical badge -->
                {% if service.critical %}
                <svg class="w-3 h-3 text-red-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
                {% endif %}
                
                <!-- Group badge -->
                {% if service.group %}
                <span class="text-[8px] px-1 py-0.5 rounded bg-dark-600 text-gray-400">{{ service.group[:3] }}</span>
                {% endif %}
            </a>
            {% endfor %}
        </div>
    </div>
</div>
{% endfor %}