<div id="login-modal" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="/api/v1/login" method="post">
                <div class="modal-header">
                    <h4 class="modal-title">Login</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="username" class="col-sm-2 col-form-label">username</label>
                        <div class="col-sm-10">
                            <input id="username" type="text" class="form-control" placeholder="enter username" name="username" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="password" class="col-sm-2 col-form-label">password</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input id="password" type="password" class="form-control" placeholder="enter password" name="password" required>
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button" onclick="showPassword()"><i id="show-hide-password-btn" class="bi bi-eye"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary"><i class="bi bi-person"></i> login</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const passwordInput = $("#password");
    const showHidePasswordButton = $("#show-hide-password-btn");

    function showPassword() {
        if (passwordInput.attr("type") === "password") {
            passwordInput.attr("type", "text");
            showHidePasswordButton.removeClass("bi-eye");
            showHidePasswordButton.addClass("bi-eye-slash");
        } else {
            passwordInput.attr("type", "password");
            showHidePasswordButton.removeClass("bi-eye-slash");
            showHidePasswordButton.addClass("bi-eye");
        }
    }
</script>
