package templates

import "sonarqube-badge/store"

templ User(user store.User) {
    <div class="container">
        <h2 class="my-4">Profile</h2>
        <div class="mb-4">
            <form id="nameForm" hx-post="/api/user/username">
                <label for="name" class="form-label">Username</label>
                <input id="name" placeholder="Username" class="form-control" name="username" value={user.Username}>
                <button class="btn btn-primary mt-2">Change Username</button>
            </form>
        </div>
        <div class="mb-4">
            <form id="emailForm" hx-post="/api/user/email">
                <label for="email" class="form-label">Email</label>
                <input id="email" class="form-control" name="email" placeholder="Email" value={user.Email}>
                <button class="btn btn-primary mt-2">Change Email</button>
            </form>
        </div>
        <div class="mb-4">
            <form id="passwordForm" hx-post="/api/user/password">
                <label for="password" class="form-label">Password</label>
                <input id="password" class="form-control" placeholder="Password" name="password" type="password" value>
                <label for="verifyPassword" class="form-label">Verify Password</label>
                <input id="verifyPassword" class="form-control" placeholder="Repeat Password" name="verify_password" type="password" value>
                <button class="btn btn-primary mt-2">Change Password</button>
            </form>
        </div>
    </div>

    <script>
        const passwordField = document.getElementById("password");
        const verifPasswordField = document.getElementById("verifyPassword")
        document.getElementById("nameForm").addEventListener("htmx:afterRequest", (ev) => {
            if (ev.detail.successful) {
                alert("Successfully changed username")
            }
        })

        document.getElementById("emailForm").addEventListener("htmx:afterRequest", (ev) => {
            if (ev.detail.successful) {
                alert("Successfully changed password")
            }
        })

        document.getElementById("passwordForm").addEventListener("htmx:afterRequest", (ev) => {
            if (ev.detail.successful) {
                passwordField.value = ""
                verifPasswordField.value = ""
                alert("Successfully changed password")
            }
        })
    </script>
}