<tr id="seismo-row-{{ unit.id }}" class="bg-blue-50 dark:bg-slate-600 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-2 whitespace-nowrap">
        <select name="status"
                class="text-xs rounded border border-gray-300 dark:border-gray-500 bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100 px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500">
            <option value="deployed" {% if unit.deployed %}selected{% endif %}>Deployed</option>
            <option value="out_for_calibration" {% if unit.out_for_calibration %}selected{% endif %}>Out for Cal</option>
            <option value="benched" {% if not unit.deployed and not unit.out_for_calibration %}selected{% endif %}>Benched</option>
        </select>
    </td>
    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
        {% 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-500 dark:text-gray-400">
        {% if unit.address %}
        <span class="truncate max-w-xs inline-block" title="{{ unit.address }}">{{ unit.address }}</span>
        {% elif unit.coordinates %}
        <span>{{ unit.coordinates }}</span>
        {% else %}
        <span class="text-gray-400 dark:text-gray-600">—</span>
        {% endif %}
    </td>
    <td class="px-4 py-2 whitespace-nowrap">
        <input type="date"
               name="last_calibrated"
               value="{{ unit.last_calibrated.strftime('%Y-%m-%d') if unit.last_calibrated else '' }}"
               class="text-xs rounded border border-gray-300 dark:border-gray-500 bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100 px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500" />
    </td>
    <td class="px-4 py-2">
        <input type="text"
               name="note"
               value="{{ unit.note or '' }}"
               placeholder="Add a note..."
               class="w-full text-sm rounded border border-gray-300 dark:border-gray-500 bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100 px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500" />
    </td>
    <td class="px-4 py-2 whitespace-nowrap text-right text-sm">
        <div class="flex items-center justify-end gap-2">
            <button hx-post="/api/seismo-dashboard/unit/{{ unit.id }}/quick-update"
                    hx-include="closest tr"
                    hx-target="#seismo-row-{{ unit.id }}"
                    hx-swap="outerHTML"
                    class="inline-flex items-center px-2.5 py-1 rounded text-xs font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
                Save
            </button>
            <button hx-get="/api/seismo-dashboard/unit/{{ unit.id }}/view-row"
                    hx-target="#seismo-row-{{ unit.id }}"
                    hx-swap="outerHTML"
                    class="inline-flex items-center px-2.5 py-1 rounded text-xs font-medium bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors">
                Cancel
            </button>
        </div>
    </td>
</tr>
