<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>{{'label.agent' | translate}}</h5>
                </div>
                <div class="ibox-content">

                    <div class="content">

                        <div class="grid-ibox-content">

                            <div class="filter-panel mat-elevation-z3">
                                <xdf-ngx-tags-input name="name" class="input-lg" [fields]="fieldFilters"
                                    (filterEvent)="onFilter($event)"></xdf-ngx-tags-input>
                            </div>

                            <br />

                            <div class="grid-container mat-elevation-z3">
                                <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
                                    <mat-spinner diameter="40"></mat-spinner>
                                </div>

                                <table class="crud-table table table-striped table-hover" mat-table
                                    [dataSource]="dataSource" matSort [matSortActive]="sortColumn"
                                    [matSortDirection]="sortDirection" matSortDisableClear multiTemplateDataRows>

                                    <ng-container matColumnDef="{{template.name}}"
                                        *ngFor="let template of columnTemplateArray">
                                        <div *ngIf="template.sortable">
                                            <th mat-header-cell *matHeaderCellDef mat-sort-header
                                                [ngClass]="{'th-avatar': template['name'] === 'avatar', 'text-right': template['name'] === 'id'}">
                                                {{ template.title | translate }}
                                                <mat-icon *ngIf="sortColumn===template?.name">
                                                    <i class="fa fa-sort-amount-desc"
                                                        *ngIf="sortDirection === 'desc'"></i>
                                                    <i class="fa fa-sort-amount-asc"
                                                        *ngIf="sortDirection === 'asc'"></i>
                                                </mat-icon>
                                            </th>
                                        </div>
                                        <div *ngIf="!template.sortable">
                                            <th mat-header-cell *matHeaderCellDef>{{ template.title | translate }}
                                            </th>
                                        </div>
                                        <td mat-cell *matCellDef="let item"
                                            [style.width]="template.style.width ? template.style.width : ''"
                                            [ngClass]="{'td-view': !this.resourceAuth['view'], 'text-right': template['name'] === 'id'}"
                                            (click)="view(item)">

                                            <div *ngIf="template['name'] !== 'avatar'">

                                                <span class="label" [ngClass]="{'label-success': item[template['name']] === 'DP', 'label-default': item[template['name']] === 'CR', 
                                                    'label-warning': item[template['name']] === 'PS' }"
                                                    *ngIf="template['name'] === 'status'">{{ item[template['name']] | agentStatus | translate }}</span>
                                                <span
                                                    *ngIf="template['name'] !== 'status'">{{ item[template['name']] }}</span>

                                            </div>
                                            <img *ngIf="template['name'] === 'avatar'" [src]="item[template['name']]"
                                                alt="Avatar" class="avatar">
                                        </td>
                                    </ng-container>

                                    <ng-container matColumnDef="actions">
                                        <th mat-header-cell *matHeaderCellDef></th>
                                        <td class="text-center mat-cell cdk-column-actions mat-column-actions ng-star-inserted"
                                            mat-cell="" role="gridcell" *matCellDef="let item">
                                            <div class="btn-group btn-actions">
                                                <!--
                                                <button mat-icon-button [matMenuTriggerFor]="beforeMenu"
                                                    aria-label="Example icon-button with a menu">
                                                    <mat-icon>more_vert</mat-icon>
                                                </button>
                                                <mat-menu #beforeMenu="matMenu" xPosition="before">
                                                    <button mat-menu-item (click)="synchronize(item)"
                                                        *ngIf="item.status !== 'DP'">
                                                        <mat-icon>sync_alt</mat-icon>
                                                        <span>Sincronizar</span>
                                                    </button>
                                                    <button mat-menu-item (click)="edit(item)"
                                                        *ngIf="this.resourceAuth['edit']">
                                                        <mat-icon>edit</mat-icon>
                                                        <span>{{'btn.edit' | translate}}</span>
                                                    </button>
                                                    <button mat-menu-item color="warn" (click)="delete(item)"
                                                        *ngIf="this.resourceAuth['delete']">
                                                        <mat-icon>delete</mat-icon>
                                                        <span>{{'btn.delete' | translate}}</span>
                                                    </button>
                                                </mat-menu>
                                            -->
                                                <button class="btn btn-default btn-sm" (click)="edit(item)"
                                                    *ngIf="this.resourceAuth['edit']" type="button">
                                                    <i class="fa fa-edit"></i>
                                                    <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                                                        {{'btn.edit' | translate}}
                                                    </span>
                                                </button>

                                                <button class="btn btn-default btn-sm" (click)="delete(item)"
                                                    *ngIf="this.resourceAuth['delete']" type="button">
                                                    <i class="fa fa-trash"></i>
                                                    <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                                                        {{'btn.delete' | translate}}
                                                    </span>
                                                </button>

                                                <button class="btn btn-default btn-sm dropdown-toggle" type="button"
                                                    [matMenuTriggerFor]="beforeMenu" [disabled]="item.status !== 'PS'">
                                                    <!-- <i class="fa fa-ellipsis-v"></i> -->
                                                </button>
                                                <mat-menu #beforeMenu="matMenu" xPosition="before">
                                                    <button mat-menu-item (click)="synchronize(item)"
                                                        *ngIf="item.status !== 'DP'">
                                                        <mat-icon>sync_alt</mat-icon>
                                                        <span>{{'btn.synchronize' | translate}}</span>
                                                    </button>
                                                </mat-menu>
                                            </div>
                                        </td>

                                    </ng-container>

                                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

                                </table>

                                <div class="status-button-bar pull-left">
                                    <button type="button" mat-icon-button
                                        matTooltip="{{ 'action.grid.refresh' | translate }}" (click)="onRefresh()">
                                        <i class="fa fa-refresh"></i>
                                    </button>
                                </div>
                                <mat-paginator [length]="pagination?.totalItems" [pageSize]="pagination?.itemsPerPage"
                                    [pageSizeOptions]="[5, 10, 15]" [pageIndex]="pagination?.currentPage">
                                </mat-paginator>
                            </div>

                        </div>

                        <!--Boton de Nuevo-->

                        <div class="toolbar-option">
                            <button color="default" mat-mini-fab="" class="mat-mini-fab"
                                matTooltip="{{'btn.new' | translate}}" (click)="create()"
                                *ngIf="this.resourceAuth['new']">
                                <span><i class="fa fa-file-o"></i></span>
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>