<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>User Pass Request | Gatepass</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
</head>
<body class="public-request-page">
    <main class="public-request-shell">
        <header class="public-request-header">
            <div class="public-request-brand">
                <i class="bi bi-clock"></i>
                <span>Gatepass</span>
            </div>
            <h1>Pass Request</h1>
            <p>Select the pass type and submit your request. No login is required.</p>
        </header>

        <section class="public-type-grid" aria-label="Pass type">
    <button class="public-type-card active" type="button" data-pass-type="personnel" aria-pressed="true">
        <i class="bi bi-person-badge"></i>
        <span>Personnel</span>
    </button>

    <button class="public-type-card" type="button" data-pass-type="visitor" aria-pressed="false">
        <i class="bi bi-person-check"></i>
        <span>Visitor</span>
    </button>

    <button class="public-type-card" type="button" data-pass-type="item" aria-pressed="false">
        <i class="bi bi-box-seam"></i>
        <span>Item</span>
    </button>

    <button class="public-type-card" type="button" data-pass-type="food" aria-pressed="false">
        <i class="bi bi-cup-hot"></i>
        <span>Food</span>
    </button>

    <button class="public-type-card" type="button" data-pass-type="mealbreak" aria-pressed="false">
        <i class="bi bi-egg-fried"></i>
        <span>Meal Break</span>
    </button>
</section>

        <section class="public-form-panel">
            <div class="public-form-heading">
                <div>
                    <h2 id="requestFormTitle">Personnel Pass</h2>
                    <p id="requestFormSubtitle">Complete the personnel pass request form.</p>
                </div>
                <span class="public-status-pill">Pending</span>
            </div>

            <div id="publicAlert" class="alert d-none" role="alert"></div>

            <form id="publicPassForm" autocomplete="off">
                <input type="hidden" name="pass_type" id="pass_type" value="personnel">
                <div id="publicFields"></div>

                <div class="public-form-actions">
                    <button class="btn btn-outline-secondary" type="button" id="clearRequestBtn">
                        <i class="bi bi-eraser"></i>
                        Clear
                    </button>
                    <button class="btn btn-primary" type="submit">
                        <i class="bi bi-send"></i>
                        Submit Request
                    </button>
                </div>
            </form>
        </section>
    </main>

    <script src="assets/js/public-pass.js"></script>
</body>
</html>
