{{define "page-content"}}
<h2>Profil von {{.FirstName}} {{.LastName}} bearbeiten</h2>

<form>
    <div class="grid grid-cols-3 gap-4">
        <div>
            <label for="username">Benutzername</label>
            <input class="w-full" name="username" type="text" value="{{.UserName}}" />
        </div>

        <div>
            <label for="first-name">Vorname</label>
            <input class="w-full" name="first-name" type="text" value="{{.FirstName}}" />
        </div>

        <div>
            <label for="last-name">Nachname</label>
            <input class="w-full" name="last-name" type="text" value="{{.LastName}}" />
        </div>

        <div>
            <label for="password">Passwort</label>
            <input class="w-full" name="password" placeholder="***" type="password" />
        </div>

        <div>
            <label for="password2">Passwort wiederholen</label>
            <input class="w-full" name="password2" placeholder="***" type="password" />
        </div>
    </div>

    <div class="flex gap-4">
        <div>
            <input required id="author" name="role" type="radio" value="3" {{if eq .Role 3 }}checked{{end}} />
            <label for="author">Autor</label>
        </div>
        <div>
            <input required id="editor" name="role" type="radio" value="2" {{if eq .Role 2 }}checked{{end}} />
            <label for="editor">Redakteur</label>
        </div>
        <div>
            <input required id="publisher" name="role" type="radio" value="1" {{if eq .Role 1 }}checked{{end}} />
            <label for="publisher">Herausgeber</label>
        </div>
        <div>
            <input required id="admin" name="role" type="radio" value="0" {{if eq .Role 0 }}checked{{end}} />
            <label for="admin">Administrator</label>
        </div>
    </div>

    <div class="btn-area">
        <input class="action-btn" type="submit" value="Aktualisieren" hx-post="/user/update/{{.ID}}"
            hx-target="#page-content" />
        <button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
    </div>
</form>
{{end}}