<div class="row top-row">
    <p class="text-left"> CC Index</p>
    <div class="btn-group-right">
        <div class="btn-group-img-right">
            <a routerLink="/admin/cc-index-form">
                <img src="{{img_path + 'add_button.png'}}">
            </a>
        </div>
        <div class="btn-group-text">
            <p class="btn-group-text-right">CC Index</p>
        </div>
    </div>
</div>
<div class="row users-container">
    <div class="filters">
        <div class="filters-right" *ngFor="let filter of filters; let i=index">
            <div>
                <p [style.width]="filter.pWidth"><a class="filters-right-title" [class.filter-active]="selectedFilter == i" (click)="applyFilter($event, i)">{{filter.name}}</a></p>
            </div>
        </div>
    </div>
</div>
<app-data-table [data]="tableData" (edit)="edit($event)" (delete)="delete($event)"></app-data-table>
<div id="table-pagination" class="row users-container">
    <a id="arrow-left" [ngClass]="[currentPage !== 1?'arrow-active':'arrow-disabled']" (click)="setPage(currentPage - 1)">
    </a>
    <a *ngFor="let number of pageNumbers" (click)="setPage(number)" [ngClass]="[number === currentPage?'active':'disabled']">{{ number }}</a>
    <a id="arrow-right" (click)="setPage(currentPage + 1)" [ngClass]="[currentPage !== lastPage?'arrow-active':'arrow-disabled']">

    </a>
</div>