<h1>
    <i class="fa fa-wpforms"></i> <span localize="contracts"></span>
    <i class="fa fa-times pull-right close-button" close-all-ui></i>
</h1>

<ul class="tab-list">
    <li ng-class="{ active: ctrl.tab == 'available' }" ng-click="ctrl.tab = 'available'" localize="available"></li>
    <li ng-class="{ active: ctrl.tab == 'completed' }" ng-click="ctrl.tab = 'completed'" localize="completed"></li>
</ul>

<p class="padding color-red text-center" ng-if="ctrl.contracts.length == 0" localize="no_contracts_available"></p>

<div style="overflow: auto; height: 490px;" id="candidates" class="padding">
    <div ng-repeat="contract in ctrl.contracts track by contract.id">
        <contract ng-contract="contract" class="border"></contract>
        <hr class="big" style="margin: 15px 20px;">
    </div>

    <!-- Pagination -->
    <ul class="pagination" ng-if="ctrl.pagination.totalPages > 1">
        <li ng-repeat="pageNumber in ctrl.pagination.pages" ng-class="{ active: pageNumber == ctrl.pagination.page }" ng-click="ctrl.changePage(pageNumber)">{{ pageNumber }}</li>
    </ul>
</div>

