<!-- Live Status Card content for connected NRLs -->
{% if error and not status %}
<div class="flex items-center gap-3 text-gray-500 dark:text-gray-400">
    <svg class="w-5 h-5 text-amber-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
    </svg>
    <span class="text-sm">{{ error }}</span>
</div>
{% elif status %}
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">

    <!-- Measurement State -->
    <div class="flex flex-col">
        <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">State</span>
        {% set state = status.get('measurement_state', 'unknown') if status is mapping else 'unknown' %}
        {% if state in ('measuring', 'recording') %}
        <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-green-600 dark:text-green-400">
            <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
            Measuring
        </span>
        {% elif state == 'paused' %}
        <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-yellow-600 dark:text-yellow-400">
            <span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
            Paused
        </span>
        {% elif state == 'stopped' %}
        <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-600 dark:text-gray-400">
            <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
            Stopped
        </span>
        {% else %}
        <span class="text-sm text-gray-500 dark:text-gray-400 capitalize">{{ state }}</span>
        {% endif %}
    </div>

    <!-- Lp (instantaneous) -->
    <div class="flex flex-col">
        <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Lp (dB)</span>
        {% set lp = status.get('lp') if status is mapping else None %}
        <span class="text-xl font-bold text-gray-900 dark:text-white">
            {% if lp is not none %}{{ "%.1f"|format(lp) }}{% else %}&mdash;{% endif %}
        </span>
    </div>

    <!-- Battery -->
    <div class="flex flex-col">
        <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Battery</span>
        {% set batt = status.get('battery_level') if status is mapping else None %}
        {% if batt is not none %}
        <span class="text-sm font-semibold
            {% if batt >= 60 %}text-green-600 dark:text-green-400
            {% elif batt >= 30 %}text-yellow-600 dark:text-yellow-400
            {% else %}text-red-600 dark:text-red-400{% endif %}">
            {{ batt }}%
        </span>
        {% else %}
        <span class="text-sm text-gray-500">&mdash;</span>
        {% endif %}
    </div>

    <!-- Last Seen -->
    <div class="flex flex-col">
        <span class="text-xs text-gray-500 dark:text-gray-400 mb-1">Last Seen</span>
        {% set last_seen = status.get('last_seen') if status is mapping else None %}
        {% if last_seen %}
        <span class="text-sm text-gray-700 dark:text-gray-300">{{ last_seen|local_datetime }}</span>
        {% else %}
        <span class="text-sm text-gray-500">&mdash;</span>
        {% endif %}
    </div>

</div>

{% if unit %}
<div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700 flex items-center justify-between">
    <span class="text-xs text-gray-400 dark:text-gray-500">
        Unit: {{ unit.id }}
        {% if unit.slm_model %} &bull; {{ unit.slm_model }}{% endif %}
    </span>
    <a href="/slm/{{ unit.id }}"
       class="text-xs text-seismo-orange hover:text-seismo-navy transition-colors">
        Open Unit &rarr;
    </a>
</div>
{% endif %}

{% else %}
<div class="text-sm text-gray-500 dark:text-gray-400">No status data available.</div>
{% endif %}
