<div class="modal-header">
    <button ng-click="vm.cancel()" type="button" aria-label="Close" class="close closebtn">&times;</button>
    <span class="modal-title">{{'Tile gallery' | translate}}</span>
</div>
<div class="modal-body">
    <div class="row">
        <div class="form-group col-sm-5">
            <select class="form-control" ng-model="vm.selectedCategory">
                <option value="">&mdash;&nbsp;&nbsp;{{'Filter by category' | translate}}&nbsp;&nbsp;&mdash;</option>
                <option ng-repeat="category in vm.categories" ng-value="category.filter">{{::category.label}}</option>
            </select>
        </div>
        <div class="form-group col-sm-5 col-sm-offset-2">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </span>
                <input type="search" 
                       class="form-control" 
                       placeholder="{{'Search by name or description' | translate}}" 
                       ng-model="vm.search" 
                       ng-model-options="{ debounce: 250 }" />
            </div>
        </div>
    </div>
    <div class="livetiles-gallery-view">
        <div class="livetiles-gallery-view-header"></div>
        <div class="livetiles-gallery-view-content">
            <table class="table">
                <colgroup>
                    <col />
                    <col />
                    <col />
                </colgroup>
                <thead>
                    <tr>
                        <th>
                            <div>{{'Name' | translate}}</div>
                        </th>
                        <th>
                            <div>{{'Description' | translate}}</div>
                        </th>
                        <th>
                            <div>{{'Size' | translate}}</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-show="!vm.loading"
                        ng-repeat="tile in filtered = (vm.tiles | filter:vm.combinedFilter) | limitTo:showLimit track by tile.id"
                        ng-click="vm.selectTile(tile)"
                        ng-class="{'bg-primary': vm.selectedTile == tile}"
                        class="livetiles-cursor-pointer"
                        tabindex="0"
                        wizdom365-enter="selectTile(tile)">
                        <td>{{::tile.title}}</td>
                        <td>{{::tile.description}}</td>
                        <td>{{::tile.size}}</td>
                    </tr>
                    <tr ng-show="loading">
                        <td class="text-center" colspan="3">{{'Loading' | translate}}</td>
                    </tr>
                    <tr ng-show="filtered.length === 0 && !vm.loading">
                        <td class="text-center" colspan="3">{{'No results' | translate}}</td>
                    </tr>
                    <tr ng-show="filtered.length > vm.showLimit" class="livetiles-showmore-row">
                        <td class="text-center" colspan="3">
                            <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>
<div class="modal-footer">
    <button class="btn btn-success" ng-if="vm.selectedTile" ng-click="vm.insertTile();">{{'Insert' | translate}}</button>
    <button class="btn btn-default" ng-click="vm.cancel();">{{(vm.selectedTile ? 'Cancel' : 'Close') | translate}}</button>
</div>