<%- include('../../Includes/begin.ejs') %>

<link rel="stylesheet" href="../../CSS/admin-dashboard.css">

<div class="container-fluid">

    <div id="wrapper">

        <%- include('../../Includes/admin_nav.ejs') %>

        <section id="content-wrapper">
            <main role="main" class="pt-5 main">

                <div class="main-content">
                    <div class="header pb-4 pb-sm-8 pt-5 pt-lg-8 d-flex align-items-center"
                        style="height: 100px; background-size: cover; background-position: center top;">

                    </div>
                    <div class="container-fluid mt--7">
                        <div class="row">
                            <div class="col-xl-12 order-xl-1">
                                <div class="card bg-secondary shadow">
                                    <div class="card-header bg-white border-0">
                                        <div class="row align-items-center">
                                            <div class="col-8">
                                                <h3 class="mb-0" style="color: brown;">ADD NEW STUDENT</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">

                                        <form action="/admin/addStudent" method="POST">
                                            <h6 class="heading-small text-muted mb-4">Student information</h6>
                                            <div class="pl-lg-4">
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label class="form-control-label" for="email">Email
                                                                address</label>
                                                            <input type="email" id="email" name="email"
                                                                class="form-control form-control-alternative"
                                                                placeholder="khogx@example.com" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group focused">
                                                            <label class="form-control-label" for="dob">DOB</label>
                                                            <input type="text" id="dob" name="dob"
                                                                class="form-control form-control-alternative"
                                                                placeholder="YYYY-MM-DD" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="form-group focused">
                                                            <label class="form-control-label" for="name">Name</label>
                                                            <input type="text" id="name" name="name"
                                                                class="form-control form-control-alternative"
                                                                placeholder="Name" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group focused">
                                                            <label class="form-control-label"
                                                                for="gender">Gender</label>
                                                            <select class="form-control" id="gender" name="gender"
                                                                required>
                                                                <option>Male</option>
                                                                <option>Female</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr class="my-4">
                                            <h6 class="heading-small text-muted mb-4">Department</h6>
                                            <div class="pl-lg-4">
                                                <div class="col-lg-12">
                                                    <div class="form-group focused">
                                                        <label class="form-control-label"
                                                            for="department">Department</label>
                                                        <select class="form-control" id="department" name="department"
                                                            required>
                                                            <% for(const department of departments) { %>
                                                            <option><%= department %></option>
                                                            <% } %>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr class="my-4">
                                            <h6 class="heading-small text-muted mb-4">Contact information</h6>
                                            <div class="pl-lg-4">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group focused">
                                                            <label class="form-control-label"
                                                                for="address">Address</label>
                                                            <input id="address" name="address"
                                                                class="form-control form-control-alternative"
                                                                placeholder="Home Address" type="text" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-4">
                                                        <div class="form-group focused">
                                                            <label class="form-control-label" for="city">City</label>
                                                            <input type="text" id="city" name="city"
                                                                class="form-control form-control-alternative"
                                                                placeholder="City" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <label class="form-control-label" for="country">Postal
                                                                code</label>
                                                            <input type="number" id="postal-code" name="postalCode"
                                                                class="form-control form-control-alternative"
                                                                placeholder="Postal code" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="form-group focused">
                                                            <label class="form-control-label" for="contact">Contact
                                                                No. (+977)</label>
                                                            <input type="text" id="contact" name="contact"
                                                                class="form-control form-control-alternative"
                                                                placeholder="0000000000" required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr class="my-4">
                                            <button type="submit" class="btn btn-primary btn-block">REGISTER
                                                STUDENT</button>
                                        </form>


                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>




            </main>
        </section>

    </div>

</div>


<%- include('../../Includes/admin_end.ejs') %>