<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.external.systems' | 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>
                                                {{ 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.width ? template.width : ''"
                                            [ngClass]="{'td-view': !this.resourceAuth['view']}" (click)="view(item)">

                                            <span *ngIf="template['name'] !== 'avatar'">{{ item[template['name']] }}</span>
                                            <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">
                                                <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>
                                            </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>