{{ define "title" }}
    User - {{ .User.Username }}
{{ end }}
{{- define "content" -}}
    {{ $currentUserId := .User.Id }}
    {{ $isLoggedInUser := .LoggedInUserPage}}
    <h1 class="headline">User: {{ .User.Username }}</h1>
    <p>{{ .User.Email }}</p>
    <hr class="divider">
    <h3>SSH Public keys</h3>
    <div class="ssh-key-grid">
        {{ if eq (len .SSHPublicKeys) 0 }}
            <p>No SSH keys configured.</p>
        {{ else }}
            {{ range .SSHPublicKeys }}
                <div class="ssh-key-item">
                    {{ if $isLoggedInUser }}
                        <form action="/user/{{ $currentUserId }}/remove-ssh-key" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove SSH key?">
                            <input type="hidden" name="ssh-key" value="{{ . }}">
                            <button class="remove ssh-remove" type="submit">
                                <div>{{ template "svgIcon" }}</div>
                            </button>
                        </form>
                    {{ end }}
                    <div class="ssh-key">{{ . }}</div>
                </div>
            {{ end }}
        {{ end }}
    </div>
    {{ if .LoggedInUserPage }}
    <hr class="divider">
    <form action="/user/{{ .User.Id }}/ssh-key" method="post">
        <fieldset class="grid twoone">
            <input type="text" id="ssh-hey" name="ssh-key" placeholder="Add SSH public key..." required>
            <button type="submit">Add SSH public key</button>
        </fieldset>
    </form>
    <hr class="divider">
    <form action="/create-group" method="post">
        <fieldset class="grid first">
            <input type="text" id="id" name="id" placeholder="Id" required>
			<input type="text" id="title" name="title" placeholder="Title" required>
            <input type="text" id="description" name="description" placeholder="Description">
            <button type="submit">Create Group</button>
        </fieldset>
    </form>
    {{ end }}
    <hr class="divider">

    <h3>Owner of groups</h3>
    <div class="user-remove">
        {{- range .OwnerGroups }}
            <a href="/group/{{ .Id }}" role="button" 
                {{ if ne .Description "" }} data-tooltip="{{ .Description }}" data-placement="bottom" {{ end }}>
                {{ .Title }}
            </a>
        {{- end }}
    </div>
    <hr class="divider">

    <h3>Direct member of groups</h3>
    <div class="user-remove">
        {{- range .MembershipGroups }}
            <a href="/group/{{ .Id }}" role="button" 
                {{ if ne .Description "" }} data-tooltip="{{ .Description }}" data-placement="bottom" {{ end }}>
                {{ .Title }}
            </a>
        {{- end }}
    </div>
    <hr class="divider">

    <h3>Transitive member of groups</h3>
    <div class="user-remove">
        {{- range .TransitiveGroups -}}
            <a href="/group/{{ .Id }}" role="button" 
               {{ if ne .Description "" }} data-tooltip="{{ .Description }}" data-placement="bottom" {{ end }}>
               {{ .Title }}
            </a>
        {{- end }}
    </div>

    <dialog id="confirmation" close>
        <article>
            <h3>Attention</h3>
            <p id="confirmation-message">Are you sure?</p>
            <footer>
                <button id="cancel-button" class="secondary cancel-button">Cancel</button>
                <button id="confirm-button">Confirm</button>
            </footer>
        </article>
    </dialog>
{{- end }}