{{define "head"}}
<meta name="robots" content="noindex">
{{end}}

{{define "content"}}
<h1>Brukere</h1>

<article>
    <h2>Opprett ny bruker</h2>
    <form method="POST" action="{{basePath}}/admin/users">
        <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
        <div class="grid">
            <label for="username">
                Brukernavn
                <input type="text" id="username" name="username" required
                       pattern="[a-zA-Z0-9_-]+" minlength="2" maxlength="30">
            </label>
            <label for="role">
                Rolle
                <select id="role" name="role">
                    <option value="user">Bruker</option>
                    <option value="admin">Administrator</option>
                </select>
            </label>
        </div>
        <button type="submit">Opprett bruker</button>
        <small>Brukeren vil få et midlertidig passord og må endre det ved første innlogging.</small>
    </form>
</article>

{{with .Data}}
<div class="table-responsive" role="region" aria-label="Brukertabell" tabindex="0">
<table role="grid">
    <thead>
        <tr>
            <th scope="col">Brukernavn</th>
            <th scope="col">Visningsnavn</th>
            <th scope="col">Rolle</th>
            <th scope="col">Status</th>
            <th scope="col">Opprettet</th>
            <th scope="col">Handlinger</th>
        </tr>
    </thead>
    <tbody>
        {{range .Users}}
        <tr {{if .Disabled}}class="disabled-row"{{end}}>
            <td><a href="{{basePath}}/u/{{.Username}}">{{.Username}}</a></td>
            <td>{{.DisplayName}}</td>
            <td>{{.Role}}</td>
            <td>
                {{if .Disabled}}Deaktivert
                {{else if .MustResetPassword}}Må endre passord
                {{else}}Aktiv{{end}}
            </td>
            <td>{{.CreatedAt.Format "02.01.2006"}}</td>
            <td>
                <form method="POST" action="{{basePath}}/admin/users/{{.ID}}/role" class="inline-form">
                    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                    <select name="role" class="inline-input">
                        <option value="user" {{if eq .Role "user"}}selected{{end}}>Bruker</option>
                        <option value="admin" {{if eq .Role "admin"}}selected{{end}}>Admin</option>
                    </select>
                    <button type="submit" class="outline nav-button">Lagre</button>
                </form>
                <form method="POST" action="{{basePath}}/admin/users/{{.ID}}/reset-password" class="inline-form">
                    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                    <button type="submit" class="outline secondary nav-button">Tilbakestill passord</button>
                </form>
                <form method="POST" action="{{basePath}}/admin/users/{{.ID}}/toggle-disabled" class="inline-form">
                    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                    <button type="submit" class="outline {{if .Disabled}}primary{{else}}secondary{{end}} nav-button">
                        {{if .Disabled}}Aktiver{{else}}Deaktiver{{end}}
                    </button>
                </form>
                <button
                    hx-post="{{basePath}}/admin/users/{{.ID}}/delete"
                    hx-confirm="Er du HELT sikker? Dette sletter brukeren og alle favorittene permanent."
                    hx-target="closest tr"
                    hx-swap="outerHTML"
                    class="outline secondary nav-button"
                    style="color: var(--pico-del-color);"
                >Slett</button>
            </td>
        </tr>
        {{end}}
    </tbody>
</table>
</div>
{{end}}
{{end}}