{% extends "base.html" %}

{% block content %}
<main class="mx-auto flex w-full max-w-2xl flex-col gap-5 px-4 py-6 sm:px-6 sm:py-8">
    <nav aria-label="Breadcrumb">
        <a href="/plugins/gate-pass/issuer" class="blocks-button blocks-button-secondary blocks-button-sm">
            <i class="fas fa-arrow-left" aria-hidden="true"></i>
            <span>Back to passes</span>
        </a>
    </nav>

    <section class="overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm"
        data-default-duration="{{ default_duration_hours }}">
        <header class="border-b border-divider px-5 py-5 sm:px-7 sm:py-6">
            <p class="mb-1 text-sm font-semibold text-brand">Gate Pass</p>
            <h1 class="text-2xl font-bold tracking-tight text-foreground">Create a guest pass</h1>
            <p class="mt-2 text-sm leading-6 text-muted">Add the visit details to generate a temporary entry QR code.</p>
        </header>

        <form id="createPassForm" action="/plugins/gate-pass/create" method="POST" class="flex flex-col gap-5 p-5 sm:p-7">
            <div id="createPassError" class="rounded-lg border border-danger px-4 py-3 text-sm text-danger" role="alert" aria-live="assertive" hidden></div>

            <div class="blocks-form-field">
                <label for="guest_name">Primary guest full name <span class="text-danger" aria-hidden="true">*</span></label>
                <input class="blocks-input" type="text" id="guest_name" name="guest_name" required autocomplete="name" placeholder="e.g. John Doe">
            </div>

            <div class="blocks-form-field">
                <label for="additional_guests">Additional guests <span class="font-normal text-muted">(optional)</span></label>
                <input class="blocks-input" type="number" id="additional_guests" name="additional_guests" min="0" value="0" aria-describedby="additionalGuestsHelp" placeholder="0">
                <p id="additionalGuestsHelp" class="text-sm text-muted">Number of extra people accompanying the primary guest.</p>
            </div>

            <div class="blocks-form-field">
                <label for="vehicle_number">Vehicle or access details <span class="font-normal text-muted">(optional)</span></label>
                <input class="blocks-input" type="text" id="vehicle_number" name="vehicle_number" autocomplete="off" placeholder="License plate, walk-in, delivery vehicle…">
            </div>

            <div class="blocks-responsive-form-grid">
                <div class="blocks-form-field">
                    <label for="appointment_time">Appointment date and time <span class="text-danger" aria-hidden="true">*</span></label>
                    <input class="blocks-input" type="datetime-local" id="appointment_time" name="appointment_time" required>
                </div>

                <div class="blocks-form-field">
                    <label for="duration_hours">Validity duration (hours) <span class="text-danger" aria-hidden="true">*</span></label>
                    <input class="blocks-input" type="number" id="duration_hours" name="duration_hours" min="1" max="72" required aria-describedby="durationHelp">
                    <p id="durationHelp" class="text-sm text-muted">Valid from the appointment time, up to 72 hours.</p>
                </div>
            </div>

            <div class="flex flex-col-reverse gap-3 border-t border-divider pt-5 sm:flex-row sm:justify-end">
                <a href="/plugins/gate-pass/issuer" class="blocks-button blocks-button-secondary">Cancel</a>
                <button type="submit" class="blocks-button blocks-button-primary sm:min-w-48">
                    <i class="fas fa-qrcode" aria-hidden="true"></i>
                    <span>Generate pass</span>
                </button>
            </div>
        </form>
    </section>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/gate-pass/assets/js/gate_pass_new.js"></script>
{% endblock %}