<!DOCTYPE html>
<html>
<head>
    <title>Students</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <style>
        body {
            background-image: url('/images/college.png');
            background-size: cover;
            background-position: center;
            height: 100vh;
            overflow: hidden;
        }
        .container {
        max-width: 800px;
        margin: auto;
        padding: 20px;
        background-color: #FFFFFF;
        border-radius: 10px;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
        font-size: 36px;
        font-weight: 700;
        color: #333333;
    }

    h3 {
        font-size: 24px;
        font-weight: 600;
        color: #333333;
    }

    .form-label {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
    }

    .btn-primary {
        background-color: #007BFF;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        font-weight: 600;
        color: #FFFFFF;
        padding: 10px 20px;
    }

    .btn-primary:hover {
        background-color: #0069D9;
    }

    select.form-select {
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        padding: 10px;
    }
</style>

        </head>
<body>
    <div class="container py-5">
        <div class="row justify-content-center text-center">
            <div class="col-md-6">
                <h1 class="mb-3">Students</h1>
                <h3 class="mb-3"><%= user.username %></h3>
                <h3 class="mb-3"><%= user.id %></h3>

                <form method="POST" action="/students" id="filter-form">
                    <div class="mb-3">
                        <label for="batch" class="form-label">Branch</label>
                        <select name="batch" class="form-select" aria-label="Batch" required>
                            <option value="">Select branch</option>
                            <% batches.forEach(function(batch) { %>
                            <option value="<%= batch %>"><%= batch %></option>
                            <% }); %>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="semester" class="form-label">Semester</label>
                        <select name="semester" class="form-select" aria-label="Semester" required>
                            <option value="">Select semester</option>
                            <% semesters.forEach(function(semester) { %>
                            <option value="<%= semester %>"><%= semester %></option>
                            <% }); %>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="department" class="form-label">Department</label>
                        <select name="department" class="form-select" aria-label="Department" required>
                            <option value="">Select department</option>
                            <% departments.forEach(function(department) { %>
                            <option value="<%= department %>"><%= department %></option>
                            <% }); %>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="section" class="form-label">Section</label>
                        <select name="section" class="form-select" aria-label="Section" required>
                            <option value="">Select section</option>
                            <% sections.forEach(function(section) { %>
                            <option value="<%= section %>"><%= section %></option>
                            <% }); %>
                        </select>
                    </div>
                    <a class="btn btn-primary" href="/logout">Logout</a>
                    <button type="submit" class="btn btn-primary" id="filter-submit">Submit</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
