{{ define "title" }}
    Group - {{ .Title }}
{{ end }}
{{ define "content" }}
{{- $parentGroupId := .GroupId }}
    <div>
        <h2 class="headline">Group: {{ .Title }}</h2>
        <p class="description">{{ .Description }}</p>
    </div>
    <hr class="divider">
    <form action="/group/{{ .GroupId }}/add-user/" method="post">
        <fieldset class="grid first">
            <select id="userId" aria-label="Select" name="userId" required>
                {{- range .AllUsers }}
                <option value="{{ .Id }}">{{ .Username }}</option>
                {{- end }}
            </select>
            <select id="status" name="status" required>
                <option value="Member" selected>Member</option>
                <option value="Owner">Owner</option>
            </select>
            <button type="submit">Add Member</button>
        </fieldset>
    </form>
    <form action="/group/{{ .GroupId }}/add-child-group" method="post">
        <fieldset class="grid twoone">
            <select id="otherId" aria-label="Select" name="otherId" required>
                {{- range .AllGroups }}
                <option value="{{ .Id }}">{{ .Title }}</option>
                {{- end }}
            </select>
            <button type="submit">Create Child Group</button>
        </fieldset>
    </form>
    <form action="/group/{{ .GroupId }}/add-owner-group" method="post">
        <fieldset class="grid twoone">
            <select id="otherId" aria-label="Select" name="otherId" required>
                {{- range .AllGroups }}
                <option value="{{ .Id }}">{{ .Title }}</option>
                {{- end }}
            </select>
            <button type="submit">Add Owner Group</button>
        </fieldset>
    </form>
    <hr class="divider">
    <h3>Owners</h3>
    <div class="user-remove">
        {{- range .Owners }}
        <div>
            <fieldset role="group">
            <a class="link-button" href="/user/{{ .Id }}" role="button">{{ .Username }}</a>
            <form action="/group/{{ $parentGroupId }}/remove-owner/{{ .Id }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to revoke user <strong>{{ .Username }}</strong>'s ownership of the  <strong>{{ $parentGroupId }}</strong> group?">
                <button class="remove" type="submit" aria-label="Remove owner">
                    {{ template "svgIcon" }}
                </button>
            </form>
            </fieldset>
        </div>
        {{- end }}
    </div>
    
    <hr class="divider">

    <h3>Members</h3>
    <div class="user-remove">
        {{- range .Members }}
        <div>
            <fieldset role="group">
                <a class="link-button" href="/user/{{ .Id }}" role="button">{{ .Username }}</a>
            <form action="/group/{{ $parentGroupId }}/remove-member/{{ .Id }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove user  <strong>{{ .Username }}</strong> user from  <strong>{{ $parentGroupId }}</strong> group?">
                <button class="remove" type="submit">
                    {{ template "svgIcon" }}
                </button>
            </form>
            </fieldset>
        </div>
        {{- end }}
    </div>
    <hr class="divider">

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

    <h3>Child Groups</h3>
    <div class="user-remove">
        {{- range .ChildGroups }}
        <div>
            <fieldset role="group">
                <a class="link-button" href="/group/{{ .Id }}" role="button" 
                    {{ if ne .Description "" }} data-tooltip="{{ .Description }}" data-placement="bottom" {{ end }}>
                    {{ .Title }}
                </a>
                <form action="/group/{{ $parentGroupId }}/remove-child-group/{{ .Id }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove group  <strong>{{ .Title }}</strong> as a child of the group  <strong>{{ $parentGroupId }}</strong>?">
                    <button class="remove" type="submit">
                        {{ template "svgIcon" }}
                    </button>
                </form>
            </fieldset>
        </div>
        {{- end }}
    </div>
    <hr class="divider">

    <h3>Owner Groups</h3>
    <div class="user-remove">
        {{- range .OwnerGroups }}
        <a class="link-button" 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 }}