<!DOCTYPE html>
<html lang="nl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BAK Verzoek Indienen</title>
    <%- include('../partials/_favicon') %>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/styles/main.css">
</head>

<body class="d-flex flex-column min-vh-100">

    <main class="flex-shrink-0">

        <%- include('../partials/_navbar') %>

        <div class="container mt-5">
            <h1>BAK Verzoek Indienen</h1>

            <% if (errorMessage) { %>
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <%= errorMessage %>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <% } %>

            <form action="/bak/submit" method="POST">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">

                <div class="mb-3">
                    <label for="targetId" class="form-label">Ontvanger</label>
                    <select id="targetId" name="targetId" class="form-select" required>
                        <option value="" selected disabled>Kies een Ontvanger</option>
                        <% users.forEach(user=> { %>
                        <option value="<%= user.id %>">
                            <%= user.name %>
                        </option>
                        <% }) %>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="reasonBak" class="form-label">Reden voor BAK</label>
                    <textarea id="reasonBak" name="reasonBak" class="form-control" rows="3" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">BAK Verzoek Indienen</button>
            </form>
        </div>

    </main>

    <%- include('../partials/_footer') %>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>