{% extends "base.html" %}

{% block title %}Kiosk · Face Attendance{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <p class="eyebrow">Recognition</p>
    <h1>Attendance kiosk</h1>
  </div>
  <a class="btn btn-outline-secondary" href="{{ url_for('attendance.index') }}">Reports</a>
</div>

<div class="kiosk-grid" data-identify-url="{{ url_for('recognition.identify') }}" data-record-url="{{ url_for('attendance.create_event') }}">
  <section class="camera-panel">
    <div class="camera-frame">
      <video id="cameraStream" autoplay playsinline muted></video>
      <img id="snapshotPreview" alt="Processed camera snapshot">
      <canvas id="snapshotCanvas"></canvas>
    </div>
    <div class="camera-actions">
      <button class="btn btn-outline-secondary" id="startCamera" type="button">Start camera</button>
      <button class="btn btn-primary" id="capturePhoto" type="button" disabled>Capture and identify</button>
    </div>
    <p class="text-secondary small mb-0" id="cameraStatus">Camera is not active.</p>
  </section>

  <section class="content-section result-panel">
    <h2>Recognition results</h2>
    <div id="recognitionResults" class="result-list">
      <div class="empty-state">Capture a face to see matching people.</div>
    </div>
  </section>
</div>
{% endblock %}

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