{% extends "base.html" %}
{% block title %}Vigilar — Sensors{% endblock %}

{% block content %}
<h5 class="mb-3"><i class="bi bi-broadcast me-2"></i>Sensors</h5>

<div class="row g-3">
    {% for sensor in sensors %}
    <div class="col-md-4 col-lg-3">
        <div class="card bg-dark border-secondary">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <h6 class="card-title mb-0">{{ sensor.display_name }}</h6>
                    <span class="badge bg-secondary">{{ sensor.protocol }}</span>
                </div>
                <p class="text-muted small mb-2">
                    <i class="bi bi-geo-alt me-1"></i>{{ sensor.location or 'Unknown' }}
                </p>
                <div class="d-flex justify-content-between align-items-center">
                    <span class="badge bg-{{ 'success' if sensor.type == 'CONTACT' else 'info' }}">
                        {{ sensor.type }}
                    </span>
                    <span class="text-muted small" id="sensor-state-{{ sensor.id }}">
                        --
                    </span>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12">
        <div class="alert alert-secondary text-center">
            <i class="bi bi-broadcast me-2"></i>
            No sensors configured. Edit <code>config/vigilar.toml</code> to add sensors.
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}