{% extends "base.html" %}

{% block content %}
<div class="top-bar">
    <a href="/dashboard" style="color: var(--color-text); text-decoration: none;">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M19 12H5M12 19l-7-7 7-7" />
        </svg>
    </a>
    <h2>Check in</h2>
    <a href="/dashboard" class="top-bar-logo-wrap">
        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="One Step Greener" class="top-bar-logo top-bar-logo-sm" />
    </a>
</div>

<div class="camera-container" id="cameraContainer">
    <video id="videoFeed" class="circle-feed" autoplay playsinline muted></video>

    <svg class="overlay-svg" viewBox="0 0 300 300">
        <!-- Corner brackets -->
        <path d="M60 40 L40 40 L40 60" stroke="#00C853" stroke-width="4" fill="none" />
        <path d="M240 40 L260 40 L260 60" stroke="#00C853" stroke-width="4" fill="none" />
        <path d="M60 260 L40 260 L40 240" stroke="#00C853" stroke-width="4" fill="none" />
        <path d="M240 260 L260 260 L260 240" stroke="#00C853" stroke-width="4" fill="none" />

        <!-- Rotating ring -->
        <circle cx="150" cy="150" r="140" stroke="#00C853" stroke-width="2" stroke-dasharray="20 20" fill="none"
            class="spin-ring" opacity="0.5" />
    </svg>
</div>

<div class="status-indicator" id="statusDot"></div>
<p class="status-text" id="statusText">Position your face in the frame</p>
<p class="status-hint" id="statusHint">Look at the camera and blink naturally to verify you're live</p>

<!-- ════ Spoof toast (banner, auto-dismiss) ═══════════════════════════════ -->
<div id="spoofToast" class="toast toast-danger" role="alert" aria-live="polite">
    <span class="toast-icon">⚠</span>
    <div class="toast-body">
        <strong class="toast-title">Spoofing detected</strong>
        <p class="toast-message" id="spoofToastMessage">Use a live face, not a photo or screen.</p>
    </div>
</div>

<!-- ════ Success Modal ═══════════════════════════════════════════════════ -->
<div id="successModal" class="modal-overlay">
    <div class="modal-card">
        <div class="checkmark-animated">✓</div>
        <h2 id="modalTitle">Checked in</h2>
        <p class="employee-name" id="modalName">John Doe</p>
        <p class="timestamp" id="modalTime">09:42 AM</p>
        <button class="btn-primary" onclick="dismissModal()">DONE</button>
    </div>
</div>

{% endblock %}

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