{% include "partials/auth-head.html" %}

<div class="auth-page">
    <div class="auth-card">
        <div class="auth-logo-space">
            <img src="/static/images/logo mctl full original.webp" alt="mctl" class="auth-logo">
        </div>
        <p class="auth-subtitle">create superadmin account</p>
        <div id="auth-error" class="auth-error" style="display:none"></div>
        <form id="register-form" autocomplete="off">
            <div class="auth-field">
                <label for="username">username</label>
                <input type="text" id="username" name="username" class="auth-input" autocomplete="username" autofocus>
            </div>
            <div class="auth-field">
                <label for="password">password</label>
                <div class="auth-input-wrap">
                    <input type="password" id="password" name="password" class="auth-input" autocomplete="new-password">
                    <button type="button" class="auth-eye-btn" id="toggle-password" tabindex="-1">
                        <i class="bi bi-eye" id="eye-icon"></i>
                    </button>
                </div>
            </div>
            <div class="auth-field">
                <label for="confirm">confirm password</label>
                <div class="auth-input-wrap">
                    <input type="password" id="confirm" name="confirm" class="auth-input" autocomplete="new-password">
                    <button type="button" class="auth-eye-btn" id="toggle-confirm" tabindex="-1">
                        <i class="bi bi-eye" id="eye-icon-confirm"></i>
                    </button>
                </div>
            </div>
            <button type="submit" class="auth-btn" id="register-btn">create account</button>
        </form>
    </div>
</div>

<script>
$(document).ready(function () {
    function toggleVisibility(inputId, iconId) {
        const input = $("#" + inputId);
        const icon = $("#" + iconId);
        if (input.attr("type") === "password") {
            input.attr("type", "text");
            icon.removeClass("bi-eye").addClass("bi-eye-slash");
        } else {
            input.attr("type", "password");
            icon.removeClass("bi-eye-slash").addClass("bi-eye");
        }
    }

    $("#toggle-password").on("click", function () { toggleVisibility("password", "eye-icon"); });
    $("#toggle-confirm").on("click", function () { toggleVisibility("confirm", "eye-icon-confirm"); });

    $("#register-form").on("submit", function (e) {
        e.preventDefault();
        const password = $("#password").val();
        const confirm = $("#confirm").val();
        if (password !== confirm) {
            $("#auth-error").text("Passwords do not match").show();
            return;
        }
        const btn = $("#register-btn");
        btn.prop("disabled", true).text("...");
        $("#auth-error").hide();
        $.ajax({
            url: "/register",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                username: $("#username").val().trim(),
                password: password
            }),
            success: function () {
                window.location.href = "/";
            },
            error: function (xhr) {
                const msg = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : "Registration failed";
                $("#auth-error").text(msg).show();
                btn.prop("disabled", false).text("create account");
            }
        });
    });
});
</script>
</body>
</html>