<div class="col-md-10 lo-main-pane ng-scope">
    <div class="row">
        <div class="lo-content-area col-md-12">
            <div ups-breadcrumb/>
            <div class="panel lo-panel ups-panel-installations">
                <div class="panel-heading">
                    <div class="pull-right">
                        <input type="search" class="form-control" placeholder="Search..." ng-model="search">
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <p ng-hide="installations.length">No Installations yet</p>
                <table class="ups-installations" ng-show="installations.length">
                    <thead>
                    <tr>
                        <th class="col-md-6">Device token</th>
                        <th class="col-md-2">Alias</th>
                        <th class="col-md-2">OS</th>
                        <th class="col-md-2">Receiving</th>
                    </tr>
                    </thead>
                    <tbody >
                    <tr ng-repeat-start="installation in installations | filter:search">
                        <td>
                            <a href="" ng-click="expand(installation)">
                                <i class="fa" ng-class="{'fa-caret-right': isCollapsed(installation), 'fa-caret-down': !isCollapsed(installation)}"></i>
                                {{ installation.deviceToken | limitTo : 50 }}...
                            </a>
                        </td>
                        <td>{{ installation.alias }} <div ng-hide="installation.alias.length">No alias</div></td>
                        <td>{{ installation.os }}</td>
                        <td>
                            <label class="ups-switch">
                                <input type="checkbox" class="ups-switch__input" ng-checked="installation.enabled" ng-click="update(installation)">
                                <div class="ups-switch__toggle"></div>
                            </label>
                        </td>
                    </tr>
                    <tr collapse="isCollapsed(installation)" ng-repeat-end>
                        <td colspan="4">
                            <table class="ups-installation-detail">
                                <tr>
                                    <td>Categories:</td>
                                    <td class="cat"><span ng-repeat="cat in installation.categories">{{ cat.name }}</span></td>
                                </tr>
                                <tr>
                                    <td>Device type:</td>
                                    <td>{{ installation.deviceType }}</td>
                                </tr>
                                <tr>
                                    <td >Token:</td>
                                    <td><div class="device-token break-words">{{ installation.deviceToken }}</div></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <pagination direction-links="true" boundary-links="false" total-items="totalItems" ng-model="currentPage" previous-text="&lsaquo;" next-text="&rsaquo;" class="pull-right ups-pagination" ng-show="installations.length" ng-change="pageChanged()" max-size="5" rotate="false"></pagination>
        </div>
    </div>
</div>
