{% extends "base.html" %}

{% block content %}
<div class="top-bar">
    <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" />
    </a>
    <div class="clock" id="clock">00:00:00</div>
</div>

<h1>Check in</h1>
<p style="margin-bottom: 24px;">Waste management attendance — choose an action below.</p>

<div class="grid-menu">
    <a href="/attendance" class="card">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 7V5a2 2 0 0 1 2-2h2"></path>
            <path d="M17 3h2a2 2 0 0 1 2 2v2"></path>
            <path d="M21 17v2a2 2 0 0 1-2 2h-2"></path>
            <path d="M7 21H5a2 2 0 0 1-2-2v-2"></path>
            <circle cx="12" cy="12" r="5"></circle>
            <line x1="12" y1="7" x2="12" y2="7.01"></line>
            <line x1="12" y1="17" x2="12" y2="17.01"></line>
            <line x1="17" y1="12" x2="17.01" y2="12"></line>
            <line x1="7" y1="12" x2="7.01" y2="12"></line>
        </svg>
        <h3>Attendance</h3>
        <span>Scan face to check in</span>
    </a>

    <a href="/register" class="card">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
            <circle cx="8.5" cy="7" r="4"></circle>
            <line x1="20" y1="8" x2="20" y2="14"></line>
            <line x1="23" y1="11" x2="17" y2="11"></line>
        </svg>
        <h3>Register</h3>
        <span>Enroll new team member</span>
    </a>
</div>

<script>
    setInterval(function() {
        document.getElementById('clock').textContent = new Date().toLocaleTimeString();
    }, 1000);
</script>
{% endblock %}