{{define "page-content"}}
<h2>Neuer Benutzer</h2>

<form>
    <div class="grid grid-cols-3 gap-4">
        <div>
            <label for="username">Benutzername</label>
            <input class="w-full" required name="username" type="text" value="{{.UserName}}" />
        </div>
        <div>
            <label for="password">Passwort</label>
            <input class="w-full" required name="password" placeholder="***" type="password" />
        </div>
        <div>
            <label for="password2">Passwort wiederholen</label>
            <input class="w-full" required name="password2" placeholder="***" type="password" />
        </div>
        <div>
            <label for="first-name">Vorname</label>
            <input class="w-full" required name="first-name" type="text" value="{{.FirstName}}" />
        </div>
        <div>
            <label for="last-name">Nachname</label>
            <input class="w-full" required name="last-name" type="text" value="{{.LastName}}" />
        </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="Anlegen" hx-post="/add-user" hx-target="#page-content" />
        <button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
    </div>
</form>

<script>
    var msg = "{{.Msg}}";
    if (msg != "") {
        alert(msg);
    }
</script>
{{end}}