<div class="grid-ibox-content d-flex">
    <div class="flex-fill mr-2">
        <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="grid-ibox-content">
                <table class="crud-table table table-striped table-hover" mat-table
                    [dataSource]="scales">

                    <ng-container *ngFor="let template of columnTemplateArray" matColumnDef="{{template.name}}">
                        <th mat-header-cell *matHeaderCellDef> {{ template.title | translate }} </th>
                        <td mat-cell *matCellDef="let item"> {{ item[template.name] }} </td>
                    </ng-container>

                    <ng-container matColumnDef="actions">
                        <th mat-header-cell *matHeaderCellDef></th>
                        <td mat-cell *matCellDef="let item">
                            <div class="d-flex justify-content-end">
                                <button type="button" (click)="onDelete(item)" [disabled]="true" class="btn btn-autline-secondary btn-small">
                                    <span><i class="fa fa-trash"></i></span>
                                    <span class="ml-1">Eliminar</span>
                                </button>
                                <button type="button" (click)="onEdit(item)" [disabled]="true" class="btn btn-autline-secondary btn-small ml-0">
                                    <span><i class="fa fa-pencil"></i></span>
                                    <span class="ml-1">Editar</span>
                                </button>
                            </div>
                        </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                </table>
            </div>
        </div>
    </div>
    <div class="toolbar-option flex-auto">
        <button type="button" (click)="onAddScale()" [disabled]="mode !== 'new'" color="default" mat-mini-fab="" class="mat-mini-fab">
            <span><i class="fa fa-plus"></i></span>
        </button>
    </div>
</div>
