<div class="row h-100">
    <!--<app-loading *ngIf="loading"></app-loading>-->
    <div class="col-12">
        <div class="row">
            <div class="col-10">
                <h3 class="title-a">Usuarios</h3>
            </div>
            <div class="col-2 text-right">
                <button [routerLink]="['/admin/users/create']" class="btn btn-success btn-sm"><i class="fa fa-plus"></i> Nuevo Usuario</button>
            </div>
        </div>

        <p-dataTable class="table table-bordred table-striped"
                     [metaKeySelection]="false"
                     [value]="users"
                     [loading]="false"
                     [responsive]="true"
                     [rows]="itemsPerPage"
                     [paginator]="paginator"
                     [totalRecords]="total"
                     [lazy]="true"
                     emptyMessage="No hay datos disponibles"
                     (onLazyLoad)="loadLazy($event)"
                     #dt>
            <p-column field="name" header="Nombre"></p-column>
            <p-column field="email" header="Email"></p-column>
            <p-column field="role" header="Rol">
                <ng-template let-user="rowData" pTemplate="body" class="center">
                    {{ (user.role == 1) ? 'Supervisor' : 'Vendedor' }}
                </ng-template>
            </p-column>
            <p-column field="deleted" header="Estado">
                <ng-template let-user="rowData" pTemplate="body" class="center">
                    {{ (user.deleted==0) ? 'Activo' : 'Eliminado' }}
                </ng-template>
            </p-column>
            <p-column field="branch_address" header="Sucursal">
                <ng-template let-user="rowData" pTemplate="body" class="center">
                    {{ user.branch_address }}
                </ng-template>
            </p-column>
            <p-column field="created_at" header="Fecha de creación">
                <ng-template let-user="rowData" pTemplate="body" class="center">
                    {{ user.created_at | date: 'dd/MM/yyyy'}}
                </ng-template>
            </p-column>
            <p-column field="actions" header="Acciones" [style]="{'width':'10%'}">
                <ng-template let-user="rowData" pTemplate="body">
                    <div class="text-center">
                        <button class="btn btn-primary btn-xs" [routerLink]="['/admin/users/edit/', user.id]"><span class="fa fa-edit"></span></button>
                        <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" (click)="setTemp(user)"><span class="fa fa-trash"></span></button>
                    </div>
                </ng-template>
            </p-column>
        </p-dataTable>

    </div>
</div>

<div class="modal fade modal-express-background" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit"
     aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog" *ngIf="_user !== null">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title custom_align" id="Heading">Eliminar Usuario</h4>
                <button type="button" class="close" style="float: right !important;" data-dismiss="modal"
                        aria-hidden="true"><span class="fa fa-times-circle" aria-hidden="true"></span></button>
            </div>
            <div class="modal-body">
                ¿Estás seguro de eliminar a {{_user.name }}?
            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true"
                        (click)="deleteUser(_user.id)"><span class="fa fa-check"></span> Eliminar
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"
                        (click)="removeTemp($event)"><span class="fa fa-times" aria-hidden="true"></span> No
                </button>
            </div>
        </div>
    </div>
</div>