{% 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>

        <!-- No deployed dot for benched units -->

        <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 benched units</p>
{% endif %}