{{#view "settings/users/users-list-view" class="users-list-wrapper js-users-list-view"}}
    <header class="settings-view-header user-list-header">
        {{#if session.user.isEditor}}
            {{#link-to "content" class="btn btn-default btn-back"}}Back{{/link-to}}
        {{else}}
            {{#link-to "settings" class="btn btn-default btn-back"}}Back{{/link-to}}
        {{/if}}

        <h2 class="page-title">Users</h2>
        <section class="page-actions">
            <button class="btn btn-green" {{action "openModal" "invite-new-user"}} >New&nbsp;User</button>
        </section>
    </header>

    <section class="content settings-users">

    {{#if invitedUsers}}

        <section class="user-list invited-users">

            <h4 class="user-list-title">Invited users</h4>

            {{#each user in invitedUsers itemController="settings/users/user"}}
                <div class="user-list-item">
                    <span class="user-list-item-icon icon-mail">ic</span>

                    <div class="user-list-item-body">
                        <span class="name">{{user.email}}</span><br>
                            {{#if user.pending}}
                                <span class="red">Invitation not sent - please try again</span>
                            {{else}}
                                <span class="description">Invitation sent: {{user.created_at}}</span>
                            {{/if}}
                    </div>
                    <aside class="user-list-item-aside">
                        <a class="user-list-action" href="#" {{action "revoke"}}>Revoke</a>
                        <a class="user-list-action" href="#" {{action "resend"}}>Resend</a>
                    </aside>
                </div>
            {{/each}}

        </section>

    {{/if}}

    <section class="user-list active-users">

        <h4 class="user-list-title">Active users</h4>

        {{#each user in activeUsers itemController="settings/users/user"}}
            {{#link-to 'settings.users.user' user class="user-list-item" }}
                <span class="user-list-item-figure" {{bind-attr style=user.image}}>
                    <span class="hidden">Photo of {{unbound user.name}}</span>
                </span>

                <div class="user-list-item-body">
                    <span class="name">
                        {{user.name}}
                    </span>
                    <br>
                    <span class="description">Last seen: {{unbound user.last_login}}</span>
                </div>
                <aside class="user-list-item-aside">
                    {{#unless user.isAuthor}}
                        {{#each role in user.roles}}
                            <span class="role-label {{unbound role.lowerCaseName}}">{{role.name}}</span>
                        {{/each}}
                    {{/unless}}
                </aside>
            {{/link-to}}
        {{/each}}

    </section>

    </section>{{! .content settings-users }}

{{/view}}