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

{% block content %}
<h5 class="mb-3"><i class="bi bi-camera-video me-2"></i>Cameras</h5>

<div class="row g-3">
    {% for camera in cameras %}
    <div class="col-md-6">
        <div class="card bg-dark border-secondary camera-card">
            <div class="card-body p-0 position-relative">
                <div class="camera-feed ratio ratio-16x9">
                    <video id="feed-{{ camera.id }}" autoplay muted playsinline></video>
                    <div class="camera-offline-overlay d-flex align-items-center justify-content-center">
                        <div class="text-center text-muted">
                            <i class="bi bi-camera-video-off fs-1"></i>
                            <p class="mt-2 mb-0">{{ camera.display_name }}</p>
                            <small>Connecting...</small>
                        </div>
                    </div>
                </div>
                <div class="camera-overlay">
                    <span class="camera-name">{{ camera.display_name }}</span>
                    <span class="camera-time" id="time-{{ camera.id }}">--:--</span>
                </div>
                <div class="camera-motion-dot d-none" id="motion-{{ camera.id }}">
                    <span class="motion-indicator"></span>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between align-items-center">
                <small class="text-muted">
                    {{ camera.resolution_capture[0] }}x{{ camera.resolution_capture[1] }} |
                    {{ camera.idle_fps }}/{{ camera.motion_fps }} FPS |
                    {{ camera.retention_days }}d retention
                </small>
                <div>
                    <a href="/recordings/?camera={{ camera.id }}" class="btn btn-sm btn-outline-light">
                        <i class="bi bi-film"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12">
        <div class="alert alert-secondary text-center">
            No cameras configured.
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/grid.js') }}"></script>
{% endblock %}