<tr id="seismo-row-{{ unit.id }}" class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
    <td class="px-4 py-3 whitespace-nowrap">
        <a href="/unit/{{ unit.id }}" class="font-medium text-blue-600 dark:text-blue-400 hover:underline">
            {{ unit.id }}
        </a>
    </td>
    <td class="px-4 py-3 whitespace-nowrap">
        {% if unit.deployed %}
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            Deployed
        </span>
        {% elif unit.out_for_calibration %}
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
            </svg>
            Out for Cal
        </span>
        {% else %}
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"></path>
            </svg>
            Benched
        </span>
        {% endif %}
    </td>
    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">
        {% if unit.deployed_with_modem_id %}
        <a href="/unit/{{ unit.deployed_with_modem_id }}" class="text-blue-600 dark:text-blue-400 hover:underline">
            {{ unit.deployed_with_modem_id }}
        </a>
        {% else %}
        <span class="text-gray-400 dark:text-gray-600">None</span>
        {% endif %}
    </td>
    <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-300">
        {% if unit.address %}
        <span class="truncate max-w-xs inline-block" title="{{ unit.address }}">{{ unit.address }}</span>
        {% elif unit.coordinates %}
        <span class="text-gray-500 dark:text-gray-400">{{ unit.coordinates }}</span>
        {% else %}
        <span class="text-gray-400 dark:text-gray-600">—</span>
        {% endif %}
    </td>
    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">
        {% if unit.last_calibrated %}
        <span class="inline-flex items-center gap-1.5">
            {% if unit.next_calibration_due and today %}
                {% set days_until = (unit.next_calibration_due - today).days %}
                {% if days_until < 0 %}
                <span class="w-2 h-2 rounded-full bg-red-500" title="Calibration expired {{ -days_until }} days ago"></span>
                {% elif days_until <= 14 %}
                <span class="w-2 h-2 rounded-full bg-yellow-500" title="Calibration expires in {{ days_until }} days"></span>
                {% else %}
                <span class="w-2 h-2 rounded-full bg-green-500" title="Calibration valid ({{ days_until }} days remaining)"></span>
                {% endif %}
            {% else %}
            <span class="w-2 h-2 rounded-full bg-gray-400" title="No expiry date set"></span>
            {% endif %}
            {{ unit.last_calibrated.strftime('%Y-%m-%d') }}
        </span>
        {% else %}
        <span class="text-gray-400 dark:text-gray-600">—</span>
        {% endif %}
    </td>
    <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-400">
        {% if unit.note %}
        <span class="truncate max-w-xs inline-block" title="{{ unit.note }}">{{ unit.note }}</span>
        {% else %}
        <span class="text-gray-400 dark:text-gray-600">—</span>
        {% endif %}
    </td>
    <td class="px-4 py-3 whitespace-nowrap text-right text-sm">
        <div class="flex items-center justify-end gap-3">
            <button hx-get="/api/seismo-dashboard/unit/{{ unit.id }}/edit-row"
                    hx-target="#seismo-row-{{ unit.id }}"
                    hx-swap="outerHTML"
                    class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
                    title="Edit row">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                </svg>
            </button>
            <a href="/unit/{{ unit.id }}" class="text-blue-600 dark:text-blue-400 hover:underline">
                View Details →
            </a>
        </div>
    </td>
</tr>
