<section class="sales-crowd-promo salescrowd-orange white-text admin-pages">
    <div class="container">
        <h1>Users</h1>
    </div>
</section>
<main class="sales-crowd-main-content" data-ng-app="SoSocialApp">
    <div class="content overlap" data-ng-controller="AdminUserOverviewCtrl">
        {{> flash_msg}}
        <section class="one-column page-content">
            {{#if breadcrumbs}}
                <div class="breadcrumb">
                    {{#each breadcrumbs}}
                        <a href="{{url}}">{{name}}</a>
                    {{/each}}
                </div>
            {{/if}}
            <div class="action-box-small">
                <table class="so-action-table">
                    <tr>
                        <td>
                            <select data-ng-model="RoleFilter">
                                <option value="">All Roles</option>
                                <option value="user">User</option>
                                <option value="subscriber">Subscriber</option>
                                <option value="subscriber_lapsed">Subscriber (Lapsed)</option>
                                <option value="admin">Admin</option>
                            </select>
                        </td>
                        <td class="table-create">
                            <a href="/admin/users/create" class="button button-large button-green desktop-only">Create New User</a>
                            <a href="/admin/users/create" class="button button-small button-green hidden-desktop">Create New User</a>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- Article list -->
            <table class="so-table">
                <thead>
                    <tr>
                        <th class="table-avatar"> </th>
                        <th class="table-title"><a href="" data-ng-click="reverse=!reverse;order('name', reverse)">Name</a></th>
                        <th class="table-role"><a href="" data-ng-click="reverse=!reverse;order('role', reverse)">Role</a></th>
                        <th class="table-date"><a href="" data-ng-click="reverse=!reverse;order('createdDate', reverse)">Date Created</a></th>
                        <th class="table-status"><a href="" data-ng-click="reverse=!reverse;order('active', reverse)">Status</a></th>
                        <th class="table-actions"><a href="" >Actions</a></th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="user in users | startFrom: pagination.page * pagination.perPage | limitTo: pagination.perPage  " data-ng-animate="'animate-enter'" class="animate-repeat">
                        <td class="table-avatar"><img src="{[{ user.avatar }]}" alt="" width="150" /></td>
                        <td class="table-title"><a href="/admin/users/{[{user._id}]}">{[{user.firstname}]} {[{user.lastname}]}</a></td>
                        <td class="table-role">{[{user.role}]}</td>
                        <td class="table-date">{[{user.createdDate | date:'dd-MM-yyyy'}]}</td>
                        <td class="table-status">{[{user.active}]}</td>
                        <td class="table-actions">
                            <a href="/admin/users/{[{user._id}]}" class="button button-small button-blue" title="Edit this article">View</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- Pagination -->
            <div class="pagination">
                <ul>
                    <li class="page-prev" data-ng-if="pagination.page != 0"><a class="page-prev" href="" data-ng-click="pagination.prevPage()">Prev</a></li>
                    <li data-ng-repeat="n in [] | range: pagination.numPages" data-ng-class="{active: n == pagination.page}"><a href="" data-ng-click="pagination.toPageId(n)">{[{n + 1}]}</a></li>
                    <li class="page-next" data-ng-if="pagination.page < (pagination.numPages - 1)"><a class="page-next" href="" data-ng-click="pagination.nextPage()">Next</a></li>
                </ul>
            </div>
        </section>
    </div>
</main>