<!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">
</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 %></h3>
                <h3 class="mb-3"><%= user.id %></h3>

                <form method="POST" action="/filter" 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 batch</option>
                            <% Branches.forEach(function(Branch) { %>
                            <option value="<%= Branch %>"><%= Branch %></option>
                            <% }); %>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="Semester" class="form-label">Semester</label>
                        <select name="Semester" class="form-select" aria-label="Semester" >
                            <option value="">Select Semester</option>
                            <% Semesters.forEach(function(Semester) { %>
                            <option value="<%= Semester %>"><%= Semester %></option>
                            <% }); %>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="Course" class="form-label">Course</label>
                        <select name="Course" class="form-select" aria-label="Course" >
                            <option value="">Select Course</option>
                            <% Courses.forEach(function(Course) { %>
                            <option value="<%= Course %>"><%= Course %></option>
                            <% }); %>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="Section" class="form-label">Section</label>
                        <select name="Section" class="form-select" aria-label="Section" >
                            <option value="">Select Section</option>
                            <% Sections.forEach(function(Section) { %>
                            <option value="<%= Section %>"><%= Section %></option>
                            <% }); %>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="Session" class="form-label">Session</label>
                        <select name="Session" class="form-select" aria-label="Session" >
                            <option value="">Select Session</option>
                            <% Sessions.forEach(function(Session) { %>
                            <option value="<%= Session %>"><%= Session %></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>
