<div class="container">
    <div class="login-container">

        <!-- Logo Section -->
        <div style="text-align:center; padding:10px 0;">

            <div class="school-logo mb-3">
                <i class="fas fa-graduation-cap"></i>
            </div>

            <h2 style="font-size:30px; font-weight:800; color:#000; margin:0;">
                StuLite
            </h2>

            <small style="color:#aaa; font-size:12px; letter-spacing:2px;">
                Secure Admin Portal
            </small>
        </div>

        <!-- Error Message -->
        <% if (typeof error_msg !=='undefined' && error_msg) { %>

            <div class="alert alert-danger">
                <%= error_msg %>
            </div>

            <% } %>


                <% if (typeof success_msg !=='undefined' && success_msg) { %>
                    <div class="alert alert-success">
                        <%= success_msg %>
                    </div>
                    <% } %>


                        <!-- Login Form -->
                        <form action="<%= ROUTES.ADMIN_LOGIN %>" method="POST">

                            <div class="form-group">
                                <input type="email" class="form-control" name="email" placeholder="Username"
                                    maxlength="35" required>
                            </div>

                            <div class="form-group password-container">
                                <input type="password" class="form-control" name="password" placeholder="Password"
                                    maxlength="30" required>

                                <span class="password-toggle" onclick="togglePassword('password', 'toggleIcon')">
                                    <i class="fa fa-eye-slash" id="toggleIcon"></i>
                                </span>
                            </div>

                            <button type="submit" class="btn btn-primary btn-login">
                                Login
                            </button>

                            <hr>

                            <div class="text-center">
                                <a class="small" href="<%= ROUTES.ADMIN_FORGOT_PASSWORD%>">
                                    Forgot Password?
                                </a>
                            </div>
                            <div class="text-center mt-3">
                                <p class="mb-0 text-muted">
                                    Don't have an account?
                                    <a href="<%= ROUTES.ADMIN_SIGNUP %>"
                                        class="fw-bold text-primary text-decoration-none">
                                        Create one
                                    </a>
                                </p>
                            </div>
                        </form>


    </div>
</div>