<!-- Localization completed -->
<div class='content-wrapper fullscreen'>
    <tabset class='tabset'>
        <tab>

            <tab-heading localized>tab.customers</tab-heading>

            <div ng-controller='CustomersTabController'>
                <div class='form-group'>
                    <input type='text'
                           ng-enter='newSearch()'
                           ng-model='paging.searchValue'
                           ng-change="newSearch()"
                           localized-placeholder='search.placeholder.customer'
                           class='form-control configurations-search-input'>

                    <div class='configurations-search-buttons'>
                        <button type='button' class='btn btn-default' ng-click='editCustomer( {} )' localized>button.add</button>
                    </div>
                </div>

                <div class='form-group'>
                    <div class="col-sm-3 margin-bottom">
                        <select class='form-control'
                                ng-model='paging.accountType'
                                ng-change='newSearch()'>
                            <option value="" selected localized>customer.type.options.all</option>
                            <option value="0" localized>customer.type.demo</option>
                            <option value="1" localized>customer.type.small</option>
                            <option value="2" localized>customer.type.corporate</option>
                        </select>
                    </div>
                    <div class="col-sm-3 margin-bottom">
                        <select class='form-control'
                                ng-model='paging.customerStatus'
                                ng-change='newSearch()'>
                            <option value="" selected localized>customer.status.options.all</option>
                            <option value="customer.new" localized>customer.new</option>
                            <option value="customer.active" localized>customer.active</option>
                            <option value="customer.need.followup" localized>customer.need.followup</option>
                            <option value="customer.followup.sent" localized>customer.followup.sent</option>
                            <option value="customer.internal.test" localized>customer.internal.test</option>
                            <option value="customer.developer" localized>customer.developer</option>
                            <option value="customer.difficult" localized>customer.difficult</option>
                            <option value="customer.inactive" localized>customer.inactive</option>
                            <option value="customer.pause" localized>customer.pause</option>
                            <option value="customer.abandon" localized>customer.abandon</option>
                            <option value="customer.denial" localized>customer.denial</option>
                            <option value="customer.onpremise" localized>customer.onpremise</option>
                            <option value="customer.client" localized>customer.client</option>
                        </select>
                    </div>
                </div>

                <div class="text-center" ng-if="paging.totalItems > paging.pageSize">
                    <pagination
                            boundary-links='true' class='pagination-sm'
                            max-size='3'
                            ng-model='paging.currentPage'
                            total-items='paging.totalItems'
                            items-per-page='paging.pageSize'
                            previous-text='&lsaquo;' next-text='&rsaquo;' first-text='&laquo;'
                            last-text='&raquo;'></pagination>
                </div>

                <table ng-if='customers && customers.length > 0' class='table'>
                    <thead>
                    <tr>
                        <th localized>table.heading.customer.name</th>
                        <th localized class="col-sm-4">table.heading.customer.desc</th>
                        <th ng-click="sortByRegistrationTime()" class="sortable">
                            <span localized>table.heading.customer.registration.time</span>
                            <span ng-if='paging.sortValue === "registrationTime" && paging.sortDirection === "asc"'
                                  class="glyphicon glyphicon-sort-by-order"></span>
                            <span ng-if='paging.sortValue === "registrationTime" && paging.sortDirection === "desc"'
                                  class="glyphicon glyphicon-sort-by-order-alt"></span>
                        </th>
                        <th ng-click="sortByLastLoginTime()" class="sortable">
                            <span localized>table.heading.customer.last.login.time</span>
                            <span ng-if='paging.sortValue === "lastLoginTime" && paging.sortDirection === "asc"'
                                  class="glyphicon glyphicon-sort-by-order"></span>
                            <span ng-if='paging.sortValue === "lastLoginTime" && paging.sortDirection === "desc"'
                                  class="glyphicon glyphicon-sort-by-order-alt"></span>
                        </th>
                        <th localized>table.heading.customer.type</th>
                        <th ng-click="sortByExpiryTime()" class="sortable">
                            <span localized>table.heading.customer.expiry.time</span>
                            <span ng-if='paging.sortValue === "expiryTime" && paging.sortDirection === "asc"'
                                  class="glyphicon glyphicon-sort-by-order"></span>
                            <span ng-if='paging.sortValue === "expiryTime" && paging.sortDirection === "desc"'
                                  class="glyphicon glyphicon-sort-by-order-alt"></span>
                        </th>
                        <th localized>table.heading.customer.device.limit</th>
                        <th localized>table.heading.customer.status</th>
                        <th class='actions-column' style="min-width: 200px" localized>table.heading.customer.actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat='customer in customers'>
                        <td>{{customer.name}}</td>
                        <td>{{customer.description}}</td>
                        <td>{{customer.registrationTime | date:'dd/MM/yyyy HH:mm:ss'}}</td>
                        <td>{{customer.lastLoginTime | date:'dd/MM/yyyy HH:mm:ss'}}</td>
                        <td>{{accountType(customer.accountType)}}</td>
                        <td ng-class="{'warning-font': customer.expiryTime && customer.expiryTime < now}">{{customer.expiryTime | date:'dd/MM/yyyy'}}</td>
                        <td>{{customer.deviceLimit}}</td>
                        <td class="{{customerClass(customer.customerStatus)}}">{{localization.localize(customer.customerStatus)}}</td>
                        <td>
                            <div>
                                <button type='button' class='btn btn-default' localized-title="button.change"
                                        ng-click='editCustomer( customer )'>
                                    <span class='glyphicon glyphicon-pencil'></span>
                                </button>
                                <button type='button' class='btn btn-default' localized-title="button.change.password"
                                        ng-click='changePassword( customer )'>
                                    <span class='glyphicon glyphicon-ice-lolly'></span>
                                </button>
                                <button type='button' localized-title="button.delete"
                                        class='btn btn-default' ng-click='removeCustomer( customer )'>
                                    <span class='glyphicon glyphicon-trash'></span>
                                </button>
                                <button type='button' class='btn btn-default' localized-title="button.login"
                                        ng-click='loginAs( customer )'>
                                    <span class='glyphicon glyphicon-copy'></span>
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div ng-if='customers && customers.length == 0' class='center' localized>notfound.customers</div>

                <div class="text-center" ng-if="paging.totalItems > paging.pageSize">
                    <pagination
                            boundary-links='true' class='pagination-sm'
                            max-size='3'
                            ng-model='paging.currentPage'
                            total-items='paging.totalItems'
                            items-per-page='paging.pageSize'
                            previous-text='&lsaquo;' next-text='&rsaquo;' first-text='&laquo;'
                            last-text='&raquo;'></pagination>
                </div>

            </div>
        </tab>

        <tab>

            <tab-heading localized>tab.common.applications</tab-heading>

            <div ng-controller='ControlPanelApplicationsTabController'>
                <div class='form-group'>
                    <input type='text'
                           ng-model='search.searchValue'
                           ng-enter='search()'
                           ng-change='search()'
                           localized-placeholder='search.placeholder.application'
                           class='form-control application-search-input'>

                    <div class='device-search-buttons'>
                        <button type='button' class='btn btn-default' ng-click='editApplication( {} )' localized>button.add</button>
                    </div>
                </div>

                <div class="text-center" ng-if="applications.length > paging.pageSize">
                    <pagination
                            boundary-links='true' class='pagination-sm'
                            max-size='3'
                            ng-model='paging.currentPage'
                            total-items='applications.length'
                            items-per-page='paging.pageSize'
                            previous-text='&lsaquo;' next-text='&rsaquo;' first-text='&laquo;'
                            last-text='&raquo;'></pagination>
                </div>

                <table ng-if='applications && applications.length > 0' class='table'>
                    <thead>
                    <tr>
                        <th localized>table.heading.common.apps.customer</th>
                        <th localized>table.heading.common.apps.pkg</th>
                        <th localized>table.heading.common.apps.name</th>
                        <th localized>table.heading.common.apps.version</th>
                        <th localized>table.heading.common.apps.url</th>
                        <th localized>table.heading.common.apps.label</th>
                        <th class='actions-column' localized>table.heading.common.apps.actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat='application in applications.slice(((paging.currentPage-1)*paging.pageSize), ((paging.currentPage)*paging.pageSize))'>
                        <td ng-if="application.commonApplication">&nbsp;</td>
                        <td ng-if="!application.commonApplication">{{application.customerName}}</td>
                        <td>{{application.pkg}}</td>
                        <td>{{application.name}}</td>
                        <td>{{application.version}}</td>
                        <td>{{application.url}}</td>
                        <td>{{application.showIcon ? '✓' : ''}}</td>

                        <td>
                            <div>
                                <button ng-if="application.commonApplication" localized-title="button.change.common.app"
                                        type='button' class='btn btn-default' ng-click='editApplication( application )'>
                                    <span class='glyphicon glyphicon-pencil'></span>
                                </button>
                                <button ng-if="application.commonApplication" localized-title="button.delete.common.app"
                                        type='button' class='btn btn-default' ng-click='removeApplication( application )'>
                                    <span class='glyphicon glyphicon-trash'></span>
                                </button>
                                <button ng-if="!application.commonApplication" localized-title="button.turn.common.app"
                                        type='button' class='btn btn-default' ng-click='turnIntoCommonApplication( application )'>
                                    <span class='glyphicon glyphicon-share'></span>
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div ng-if='applications && applications.length === 0' class='center' localized>notfound.common.apps</div>

                <div class="text-center" ng-if="applications.length > paging.pageSize">
                    <pagination
                            boundary-links='true' class='pagination-sm'
                            max-size='3'
                            ng-model='paging.currentPage'
                            total-items='applications.length'
                            items-per-page='paging.pageSize'
                            previous-text='&lsaquo;' next-text='&rsaquo;' first-text='&laquo;'
                            last-text='&raquo;'></pagination>
                </div>
            </div>
        </tab>
    </tabset>
</div>