<div layout>
    <md-content flex layout-padding>
        <md-card>
         <md-data-table-toolbar ng-hide="administration.selected.length || administration.filter.show">
            <h2 class="md-title">Administration</h2>
            <div flex></div>
            <md-button class="md-icon-button" ng-click="administration.filter.show = true">
                <i class="material-icons md-dark">search</i>
            </md-button>
        </md-data-table-toolbar>

        <md-data-table-toolbar ng-show="administration.filter.show && !administration.selected.length">
            <i class="material-icons md-dark">search</i>
            <form flex name="administration.filter.form">
                <input type="text" ng-model="administration.query.filter" ng-model-options="administration.filter.options" placeholder="Search...">
            </form>
            <md-button class="md-icon-button" ng-click="administration.removeFilter()">
                <i class="material-icons md-dark">close</i>
            </md-button>
        </md-data-table-toolbar>

        <md-data-table-toolbar class="alternate" ng-show="administration.selected.length" layout-align="space-between">
            <div>{{administration.selected.length}} {{administration.selected.length > 1 ? 'items' : 'item'}} selected</div>
            <div flex></div>
            <md-button class="md-icon-button" ng-show="administration.selected.length == 1" ui-sref="editAdministrationUser({ id: administration.selected[0].id })">
                <i class="material-icons md-dark">edit</i>
            </md-button>
            <md-button class="md-icon-button">
                <i class="material-icons md-dark">delete</i>
            </md-button>
        </md-data-table-toolbar>

        <md-data-table-container>
            <table md-data-table md-row-select="administration.selected" md-progress="administration.deferred">
                <thead>
                    <tr>
                        <th name="Username" order-by="userName"></th>
                        <th name="Name" order-by="name"></th>
                        <th name="Last Login" unit="date"></th>
                        <th name="Role"></th>
                        <th name="Email"></th>
                        <th name="Organization"></th>
                        <th name="Status"></th>
                        <th name="Title"></th>
                        <th name="Department"></th>
                       
                    </tr>
                </thead>
                <tbody>
                    <tr md-auto-select ng-repeat="admin in administration.userslist | filter:administration.query.filter">
                        <td>{{admin.username}}</td>
                        <td>{{admin.fullName}}</td>
                        <td>{{admin.lastLogin | date:'shortDate'}}</td>
                        <td><span ng-repeat="role in admin.roles">{{role.name}}<span ng-if="!$last">, </span></span></td>
                        <td>{{admin.email}}</td>
                        <td>{{admin.organization}}</td>
                        <td>{{admin.active}}</td>
                        <td>{{admin.title}}</td>
                        <td>{{admin.department}}</td>

                    </tr>
                </tbody>
            </table>
        </md-data-table-container>

        <md-data-table-pagination md-limit="administration.query.limit" md-page="administration.query.page" md-total="{{administration.userslist.length}}" md-trigger="administration.onPaginationChange"></md-data-table-pagination>
        <!-- end md-data-table -->

        </md-card>
    </md-content>
</div>
