core/auth/memberships/memberships-tmpl/group.html

{{ define "svgIcon" }}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <g fill="none" fill-rule="evenodd">
        <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
        <path fill="currentColor" d="m12 13.414l5.657 5.657a1 1 0 0 0 1.414-1.414L13.414 12l5.657-5.657a1 1 0 0 0-1.414-1.414L12 10.586L6.343 4.929A1 1 0 0 0 4.93 6.343L10.586 12l-5.657 5.657a1 1 0 1 0 1.414 1.414z" />
    </g>
</svg>
{{ end }}

{{ define "title" }}
    Group - {{ .GroupName }}
{{ end }}

{{ define "content" }}
{{- $parentGroupName := .GroupName }}
    <div>
        <h2 class="headline">Group: {{ .GroupName }}</h2>
        <p class="description">{{ .Description }}</p>
    </div>
    <hr class="divider">
    <form action="/group/{{ .GroupName }}/add-user/" method="post">
        <fieldset class="grid first">
            <input type="text" id="username" name="username" placeholder="username" required>
            <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/{{ .GroupName }}/add-child-group" method="post">
        <fieldset class="grid twoone">
            <select id="child-group" aria-label="Select" name="child-group" required>
                {{- range .AllGroups }}
                <option value="{{ .Name }}">{{ .Name }}</option>
                {{- end }}
            </select>
            <button type="submit">Create Child Group</button>
        </fieldset>
    </form>
    <form action="/group/{{ .GroupName }}/add-owner-group" method="post">
        <fieldset class="grid twoone">
            <select id="owner-group" aria-label="Select" name="owner-group" required>
                {{- range .AllGroups }}
                <option value="{{ .Name }}">{{ .Name }}</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/{{ . }}" role="button">{{ . }}</a>
            <form action="/group/{{ $parentGroupName }}/remove-owner/{{ . }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to revoke user <strong>{{ . }}</strong>'s ownership of the  <strong>{{ $parentGroupName }}</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/{{ . }}" role="button">{{ . }}</a>
            <form action="/group/{{ $parentGroupName }}/remove-member/{{ . }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove user  <strong>{{ . }}</strong> user from  <strong>{{ $parentGroupName }}</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/{{ .Name }}" role="button" 
               {{ if ne .Description "" }} data-tooltip="{{ .Description }}" data-placement="bottom" {{ end }}>
               {{ .Name }}
            </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/{{ .Name }}" role="button" 
                    {{ if ne .Description "" }} data-tooltip="{{ .Description }}" data-placement="bottom" {{ end }}>
                    {{ .Name }}
                </a>
                <form action="/group/{{ $parentGroupName }}/remove-child-group/{{ .Name }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove group  <strong>{{ .Name }}</strong> as a child of the group  <strong>{{ $parentGroupName }}</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/{{ .Name }}" role="button" 
            {{ if ne .Description "" }} data-tooltip="{{ .Description }}" data-placement="bottom" {{ end }}>
            {{ .Name }}
        </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 }}