<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>Staff users</h2>
        {{!-- Do not show Invite user button to authors --}}
        {{#unless this.currentUser.isAuthorOrContributor}}
            <section class="view-actions">
                <button class="gh-btn gh-btn-green" {{action "toggleInviteUserModal"}} ><span>Invite people</span></button>
            </section>
        {{/unless}}
    </GhCanvasHeader>

    {{#if this.showInviteUserModal}}
        <GhFullscreenModal @modal="invite-new-user"
            @close={{action "toggleInviteUserModal"}}
            @modifier="action wide" />
    {{/if}}

    <section class="view-container gh-team">
    {{!-- Show invited users to everyone except authors --}}
    {{#unless this.currentUser.isAuthorOrContributor}}
        {{#if this.invites}}
        <section class="apps-grid-container gh-invited-users apps-first-header" data-test-invited-users>
            <span class="apps-grid-title">Invited users</span>
            <div class="apps-grid">

                {{#each this.sortedInvites as |invite|}}
                    <GhUserInvited @invite={{invite}} @reload={{route-action "reload"}} as |component|>
                        <div class="apps-grid-cell" data-test-invite-id="{{invite.id}}">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <span class="user-list-item-icon">{{svg-jar "email"}}ic</span>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title" data-test-email>{{invite.email}}</h3>
                                        <p class="apps-card-app-desc">
                                            {{#if invite.pending}}
                                                <span class="description-error">
                                                    Invitation not sent - please try again
                                                </span>
                                            {{else}}
                                                <span class="description" data-test-invite-description>
                                                    Invitation sent: {{component.createdAt}},
                                                    {{if component.isExpired "expired" "expires"}} {{component.expiresAt}}
                                                </span>
                                            {{/if}}
                                        </p>
                                    </div>
                                </div>
                                <div class="apps-card-right">
                                    <div class="apps-configured">
                                        {{#if component.isSending}}
                                            <span>Sending Invite...</span>
                                        {{else}}
                                            <a class="apps-configured-action red-hover" href="#revoke" {{action "revoke" target=component}} data-test-revoke-button>
                                                Revoke
                                            </a>
                                            <a class="apps-configured-action green-hover" href="#resend" {{action "resend" target=component}} data-test-resend-button>
                                                Resend
                                            </a>

                                            <span class="apps-configured-action gh-badge {{invite.role.lowerCaseName}}" data-test-role-name>{{invite.role.name}}</span>
                                        {{/if}}
                                    </div>
                                </div>
                            </article>
                        </div>
                    </GhUserInvited>
                {{/each}}

            </div>
        </section>
        {{/if}}
    {{/unless}}

    <section class="apps-grid-container gh-active-users {{unless this.invites "apps-first-header"}}" data-test-active-users>
        <span class="apps-grid-title">Active users</span>
        <div class="apps-grid">
            {{!-- For authors/contributors, only show their own user --}}
            {{#if this.currentUser.isAuthorOrContributor}}
                <GhUserActive @user={{this.currentUser}} as |component|>
                    <GhUserListItem @user={{this.currentUser}} @component={{component}} />
                </GhUserActive>
            {{else}}
                {{#vertical-collection this.sortedActiveUsers
                    key="id"
                    containerSelector=".gh-main"
                    estimateHeight=75
                    as |user|
                }}
                    <GhUserActive @user={{user}} as |component|>
                        <GhUserListItem @user={{user}} @component={{component}} />
                    </GhUserActive>
                {{/vertical-collection}}
            {{/if}}
        </div>
    </section>
    </section>

    {{!-- Don't show if we have no suspended users or logged in as an author --}}
    {{#if (and this.suspendedUsers (not this.currentUser.isAuthorOrContributor))}}
    <section class="apps-grid-container gh-active-users" data-test-suspended-users>
        <span class="apps-grid-title">Suspended users</span>
        <div class="apps-grid">
            {{#each this.sortedSuspendedUsers key="id" as |user|}}
                <GhUserActive @user={{user}} as |component|>
                    <GhUserListItem @user={{user}} @component={{component}} />
                </GhUserActive>
            {{/each}}
        </div>
    </section>
    {{/if}}
</section>
