<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) { %>
            <p class="text-danger">
                <%= error_msg %>
            </p>
            <% } %>


                <!-- Signup Form -->
                <form action="<%= ROUTES.ADMIN_SIGNUP %>" method="POST" enctype="multipart/form-data">
                    <div class="form-group text-center mb-4">

                        <div class="profile-upload">

                            <img id="previewImage" src="https://cdn-icons-png.flaticon.com/512/149/149071.png"
                                alt="Profile">

                            <label for="profile_image" class="camera-icon">
                                <i class="fa fa-camera"></i>
                            </label>

                            <input type="file" id="profile_image" name="profile_image" accept="image/*"
                                onchange="previewProfileImage(event)" hidden>

                        </div>

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

                    <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>
                    <div class="form-group password-container">
                        <input type="password" class="form-control" name="confirm_password"
                            placeholder="Confirm Password" maxlength="30" required>

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

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

                    <hr>

                    <div class="text-center mt-3">
                        <p class="mb-0 text-muted">
                            Already have an account? <a href="<%= ROUTES.ADMIN_LOGIN %>"
                                class="fw-bold text-primary text-decoration-none">
                                Login
                            </a>
                        </p>
                    </div>

                </form>

    </div>
</div>

<script>
    function previewProfileImage(event) {

        const image = document.getElementById("previewImage");

        image.src = URL.createObjectURL(event.target.files[0]);

    }
</script>