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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nieuwe Hall of Fame Inzending Toevoegen</title>
    <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">
    <style>
        .form-section {
            margin-bottom: 2rem;
        }

        .form-section h2 {
            margin-bottom: 1rem;
            font-size: 1.5rem;
            color: #007bff;
        }

        .form-section p {
            font-size: 1rem;
            color: #6c757d;
        }

        .custom-container {
            max-width: 600px;
            margin: 0 auto;
        }

        .btn-custom {
            background-color: #007bff;
            border: none;
        }

        .btn-custom:hover {
            background-color: #0056b3;
        }

        .form-control:invalid {
            border-color: #dc3545;
        }

        .form-control:invalid:focus {
            box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
        }

        .form-control:valid {
            border-color: #28a745;
        }

        .form-control:valid:focus {
            box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
        }
    </style>
</head>

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

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

        <div class="container custom-container mt-5">
            <h1 class="mb-4">Nieuwe Hall of Fame Inzending Toevoegen</h1>
            <form action="/hall-of-fame/new" method="POST" novalidate>
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">

                <div class="form-section">
                    <h2>Gebruikersinformatie</h2>
                    <p>Selecteer de gebruiker die bij deze inzending hoort.</p>
                    <div class="mb-3">
                        <label for="userId" class="form-label">Gebruiker</label>
                        <select id="userId" name="userId" class="form-select" required>
                            <% users.forEach(user => { %>
                            <option value="<%= user.id %>"><%= user.name %></option>
                            <% }) %>
                        </select>
                        <div class="invalid-feedback">Selecteer een gebruiker.</div>
                    </div>
                </div>

                <div class="form-section">
                    <h2>Prestatiegegevens</h2>
                    <p>Geef details over de prestatie en activiteit.</p>
                    <div class="mb-3">
                        <label for="prestatie" class="form-label">Prestatie</label>
                        <input type="text" class="form-control" id="prestatie" name="prestatie" required>
                        <div class="invalid-feedback">Voer de prestatie in.</div>
                    </div>
                    <div class="mb-3">
                        <label for="activiteit" class="form-label">Activiteit</label>
                        <input type="text" class="form-control" id="activiteit" name="activiteit" required>
                        <div class="invalid-feedback">Voer de activiteit in.</div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">Inzending Toevoegen</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>
    <script>
        // Aangepaste Bootstrap validatie
        (function () {
            'use strict'

            // Alle formulieren ophalen waar we aangepaste Bootstrap validatiestijlen op willen toepassen
            const forms = document.querySelectorAll('form')

            // Over de formulieren loopen en indien nodig de inzending voorkomen
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }

                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
</body>

</html>