{% for id, unit in units.items() %}
<a href="/unit/{{ id }}" 
   class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700">
    
    <div class="flex items-center space-x-3">
        <span class="w-3 h-3 rounded-full 
            {% if unit.status == 'OK' %} bg-green-500
            {% elif unit.status == 'Pending' %} bg-yellow-500
            {% else %} bg-red-500 {% endif %}">
        </span>

        <span class="w-2 h-2 rounded-full bg-blue-500"></span>

        <span class="font-medium">{{ id }}</span>
    </div>

    <span class="text-sm text-gray-500 dark:text-gray-400">{{ unit.age }}</span>
</a>
{% endfor %}

{% if units|length == 0 %}
<p class="text-gray-500 dark:text-gray-400 text-sm">No active units</p>
{% endif %}