{% extends "base.html" %}
{% block title %}{{ camera.name }} · TailCam{% endblock %}
{% block content %}
<div class="page-head">
    <h1 id="camera-name" data-camera-id="{{ camera.descriptor.id }}">{{ camera.name }}</h1>
    <a class="btn ghost" href="/">← All cameras</a>
</div>

<div class="camera-layout">
    <div class="viewer">
        <img id="feed" src="/stream/{{ camera.descriptor.id }}.mjpg?fps=15" alt="{{ camera.name }}">
        <div class="viewer-status">
            <span id="rec-indicator" class="rec hidden">● REC <span id="rec-timer">0:00</span></span>
            <span id="status-pill" class="badge">connecting…</span>
        </div>
    </div>

    <aside class="controls">
        <section>
            <h3>Capture</h3>
            <label>Snapshot
                <button class="btn" id="snapshot-btn">📸 Capture</button>
            </label>
            <label>Recording
                <button class="btn" id="record-btn">⏺ Start</button>
            </label>
        </section>

        <section>
            <h3>View (this browser only)</h3>
            <label>FPS <output id="fps-out">15</output>
                <input type="range" id="fps" min="1" max="30" value="15">
            </label>
            <label>Zoom <output id="zoom-out">1.0×</output>
                <input type="range" id="zoom" min="1" max="6" step="0.1" value="1">
            </label>
            <label>Pan X <input type="range" id="pan_x" min="0" max="1" step="0.05" value="0.5"></label>
            <label>Pan Y <input type="range" id="pan_y" min="0" max="1" step="0.05" value="0.5"></label>
        </section>

        <section>
            <h3>Camera settings (all viewers)</h3>
            <label>Resolution
                <select id="resolution">
                    <option value="640x480">640 × 480</option>
                    <option value="1280x720" selected>1280 × 720</option>
                    <option value="1920x1080">1920 × 1080</option>
                </select>
            </label>
            <label>Rotation
                <select id="rotation">
                    <option value="0">0°</option>
                    <option value="90">90°</option>
                    <option value="180">180°</option>
                    <option value="270">270°</option>
                </select>
            </label>
            <label class="inline"><input type="checkbox" id="flip_h"> Flip horizontal</label>
            <label class="inline"><input type="checkbox" id="flip_v"> Flip vertical</label>
            <label>Brightness <input type="range" id="brightness" min="0" max="255" value="128"></label>
            <label>Contrast <input type="range" id="contrast" min="0" max="255" value="128"></label>
            <button class="btn" id="apply-settings">Apply</button>
        </section>

        <section>
            <h3>Monitoring</h3>
            <label class="inline"><input type="checkbox" id="motion_enabled"> Motion detection</label>
            <label>Rename
                <input type="text" id="rename-input" value="{{ camera.name }}">
                <button class="btn ghost" id="rename-btn">Save name</button>
            </label>
        </section>
    </aside>
</div>
{% endblock %}
{% block scripts %}
<script>TailCam.initCamera("{{ camera.descriptor.id }}");</script>
{% endblock %}