{{define "page-content"}}
<h2>{{.Title}}</h2>

<form class="flex flex-col gap-4" hx-encoding="multipart/form-data">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        {{template "profile-pic-template" .}}

        <div>
            <label for="username">Benutzername</label>
            <input class="w-full" required name="username" type="text" {{if lt .Role 4}}value="{{.UserName}}" {{end}} />
        </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" {{if lt .Role 4}}value="{{.FirstName}}"
                {{end}} />
        </div>

        <div>
            <label for="last-name">Nachname</label>
            <input class="w-full" required name="last-name" type="text" {{if lt .Role 4}}value="{{.LastName}}"
                {{end}} />
        </div>

        <div>
            <label for="email">Emailadresse</label>
            <input class="w-full" required name="email" type="text" {{if lt .Role 4}}value="{{.Email}}" {{end}} />
        </div>

        <div>
            <label for="email2">Emailadresse wiederholen</label>
            <input class="w-full" required name="email2" type="text" {{if lt .Role 4}}value="{{.Email}}" {{end}} />
        </div>
    </div>

    {{if lt .Role 4}}
    <div class="flex flex-wrap 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>
    {{end}}

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

{{define "profile-pic-template"}}
<div class="flex items-center justify-center row-span-3 self-center" id="profile-pic-container">
    <label
        class="bg-slate-200 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-900 border border-slate-200 dark:border-slate-800 cursor-pointer flex flex-col h-48 items-center justify-center overflow-hidden rounded-full w-48"
        for="upload-profile-pic">
        {{if gt (len .Image) 0}}
        <img src="/image/serve/{{.Image}}" alt="" />
        {{else}}
        <span class="text-2xl">+</span>
        <span>Profilbild</span>
        {{end}}
    </label>
    <input class="hidden" id="upload-profile-pic" name="upload-profile-pic" type="file"
        hx-post="/user/upload-profile-pic" hx-swap="outerHTML" hx-target="#profile-pic-container" />
    <input id="profile-pic-url" name="profile-pic-url" type="hidden" value="{{.Image}}" />
</div>
{{end}}