{% extends "base.html" %}
{% block title %}Gallery · TailCam{% endblock %}
{% block content %}
<div class="page-head">
    <h1>Gallery</h1>
    <div class="filters">
        <select id="filter-camera">
            <option value="">All cameras</option>
            {% for cam in cameras %}
            <option value="{{ cam.descriptor.id }}">{{ cam.name }}</option>
            {% endfor %}
        </select>
        <select id="filter-type">
            <option value="">All media</option>
            <option value="snapshot">Snapshots</option>
            <option value="recording">Recordings</option>
        </select>
    </div>
</div>
<div class="grid" id="media-grid"></div>
<p class="empty hidden" id="media-empty">No media yet. Capture a snapshot or recording.</p>
{% endblock %}
{% block scripts %}
<script>TailCam.initGallery();</script>
{% endblock %}