<div ng-controller="LiveTilesAdminController as vm" class="livetiles-admin-overview">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Tile Overview' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <button type="button" class="btn btn-default" ng-click="vm.createTile()" ng-if="vm.dataReady">+&nbsp;{{'Create' | translate}}</button>
            <div class="input-group">
                <input ng-model="vm.search" ng-model-options="{ debounce: 250 }" type="search" class="form-control" placeholder="{{'Search by name or description' | translate}}" />
                <div class="input-group-btn dropdown" dropdown>
                    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle aria-haspopup="true" aria-expanded="false">
                        {{vm.filterText}}&nbsp;<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" ng-init="vm.filterText = ('All tiles' | translate)">
                        <li><a ng-click="vm.selectFilter($event, null)">{{'All tiles' | translate}}</a></li>
                        <li><a ng-click="vm.selectFilter($event, 'owner')">{{'Tiles where I am owner' | translate}}</a></li>
                        <li><a ng-click="vm.selectFilter($event, 'recentEdit')">{{'My recently edited tiles' | translate}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="lt-module-page__content">
        <div class="container-fluid">
            <table class="table table-hover">
                <colgroup>
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                </colgroup>
                <thead>
                    <tr>
                        <th ng-click="vm.setOrder('title')">
                            {{'Name' | translate}}
                            <span ng-if="orderField === 'title' && !orderReverse" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
                            <span ng-if="orderField === 'title' && orderReverse" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                        </th>
                        <th dropdown dropdown-toggle class="dropdown">
                            {{'Categories' | translate}}&nbsp;<small ng-show="vm.selectedCategory">({{selectedCategory}})</small>
                            <ul class="dropdown-menu">
                                <li>
                                    <a ng-click="vm.selectCategory()">&nbsp;</a>
                                </li>
                                <li ng-repeat="category in vm.categories" ng-class="{ 'active': category.active }">
                                    <a ng-click="vm.selectCategory(category)">{{::category.label}}</a>
                                </li>
                            </ul>
                        </th>
                        <th ng-click="vm.setOrder('value.owner[0].displayName')">
                            {{'Owner' | translate}}
                            <span ng-if="vm.orderField === 'value.owner[0].displayName' && !vm.orderReverse" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
                            <span ng-if="vm.orderField === 'value.owner[0].displayName' && vm.orderReverse" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                        </th>
                        <th ng-click="vm.setOrder('typeDisplayName')">
                            {{'Type' | translate}}
                            <span ng-if="vm.orderField === 'typeDisplayName' && !vm.orderReverse" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
                            <span ng-if="vm.orderField === 'typeDisplayName' && vm.orderReverse" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                        </th>
                        <th ng-click="vm.setOrder('value.size')">
                            {{'Size' | translate}}
                            <span ng-if="vm.orderField === 'value.size' && !vm.orderReverse" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
                            <span ng-if="vm.orderField === 'value.size' && vm.orderReverse" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="tile in filtered = (vm.repositories.Tiles.children | filter:vm.combinedFilter) | orderBy:orderField:vm.orderReverse | limitTo:showLimit track by tile.id"
                        ng-click="vm.editTile(tile)"
                        class="livetiles-cursor-pointer"
                        title="{{'Click to edit' | translate}}">
                        <td>
                            {{tile.title}}
                            <span ng-if="tile.audiences.length > 0" class="label label-primary">{{'Audience' | translate}}</span>
                            <span ng-if="tile.value.disabled" class="label label-warning">{{'Disabled' | translate}}</span>
                            <br ng-if="tile.value.description" />
                            <small ng-if="tile.value.description">{{tile.value.description}}</small>
                        </td>
                        <td>
                            <span ng-repeat="category in tile.value.categories">
                                {{category.label + (!$last ? ", " : "")}}
                            </span>
                        </td>
                        <td>{{(tile.value.owner[0] && tile.value.owner[0].displayName)}}</td>
                        <td>{{tile.typeDisplayName}}</td>
                        <td>{{vm.getSizeName(tile.value.size)}}</td>
                    </tr>
                    <tr ng-show="!vm.dataReady">
                        <td class="text-center" colspan="5">{{'Loading' | translate}}</td>
                    </tr>
                    <tr ng-show="filtered.length === 0">
                        <td class="text-center" colspan="5">{{'No results' | translate}}</td>
                    </tr>
                    <tr ng-show="filtered.length > showLimit" class="livetiles-showmore-row">
                        <td colspan="5">
                            <button type="button" class="btn btn-link" ng-click="vm.showLimit = vm.showLimit + 50">{{'Show more' | translate}}</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>