<kt-portlet>
	<kt-portlet-header [title]="titulo" [class]="'kt-portlet__head--lg'">
		<div ktPortletTools>
			<button [routerLink]="['../../clientes/']"
					class="btn btn-primary kt-margin-r-10"
					[disabled]="isLoading"
					mat-raised-button matTooltip="Regresar">
				<i class="la la-arrow-left"></i>
				<span class="kt-hidden-mobile">Regresar</span>
			</button>
			<button [routerLink]="['../../clientes-domicilios/add/', clienteID]"  mat-raised-button class="btn btn-primary" matTooltip="Crear nuevo domicilio" *ngxPermissionsOnly="'administrador.clientes.domicilios.store'">
				<i class="la la-plus"></i>
				<span class="kt-hidden-mobile ml-2">Nuevo domicilio</span>
			</button>
		</div>
	</kt-portlet-header>

	<kt-portlet-body>

		<div class="kt-form kt-margin-b-30">
			<div class="kt-form__filtration">
				<div class="row align-items-center">
					<div class="col-md-1 kt-margin-bottom-10-mobile">
						<mat-form-field>
							<input matInput (keyup)="onKeyUp($event)" (keydown)="onKeyDown()" placeholder="Buscar..." class="mat-form-field mat-form-field-fluid">
							<mat-hint align="start">
								<strong>Buscar en todos los campos</strong>
							</mat-hint>
						</mat-form-field>
					</div>
				</div>
			</div>
		</div>

		<div class="mat-table__wrapper">
			<mat-table class="lmat-elevation-z8" [dataSource]="dataSourceClientesDomicilios" (matSortChange)="sort($event)" matSort matSortActive="id" matSortDirection="asc" matSortDisableClear>

				<ng-container matColumnDef="nombre_sucursal">
					<mat-header-cell *matHeaderCellDef mat-sort-header>Sucursal</mat-header-cell>
					<mat-cell *matCellDef="let domicilios">{{domicilios.nombre_sucursal}}</mat-cell>
				</ng-container>

                <ng-container matColumnDef="domicilio">
					<mat-header-cell *matHeaderCellDef mat-sort-header>Domicilio</mat-header-cell>
					<mat-cell *matCellDef="let domicilios">{{domicilios.calle + ' ' + domicilios.num_ext + ' ' + domicilios.colonia + ' ' + domicilios.cp}}</mat-cell>
				</ng-container>

                <ng-container matColumnDef="nombre_responsable_sucursal">
					<mat-header-cell *matHeaderCellDef mat-sort-header>Responsable</mat-header-cell>
					<mat-cell *matCellDef="let domicilios">{{domicilios.nombre_responsable_sucursal}}</mat-cell>
				</ng-container>

                <ng-container matColumnDef="telefono">
					<mat-header-cell *matHeaderCellDef mat-sort-header>Teléfono</mat-header-cell>
					<mat-cell *matCellDef="let domicilios">{{domicilios.telefono}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="email">
					<mat-header-cell *matHeaderCellDef mat-sort-header>Correo electrónico</mat-header-cell>
					<mat-cell *matCellDef="let domicilios">{{(domicilios.email) ? domicilios.email : 'Email no registrado'}}</mat-cell>
				</ng-container>

                <ng-container matColumnDef="created_at">
					<mat-header-cell *matHeaderCellDef mat-sort-header>Fecha</mat-header-cell>
					<mat-cell *matCellDef="let domicilios">{{(domicilios.created_at) ? domicilios.created_at : 'Fecha no registrada'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="croquis">
					<mat-header-cell *matHeaderCellDef mat-sort-header>Croquis</mat-header-cell>
					<mat-cell *matCellDef="let domicilios"><mat-icon>{{(domicilios.nombre_croquis == '' || domicilios.nombre_croquis == null) ? 'clear' : 'done'}}</mat-icon></mat-cell>
				</ng-container>

				<ng-container matColumnDef="actions">
					<mat-header-cell *matHeaderCellDef></mat-header-cell>
					<mat-cell *matCellDef="let domicilios" class="justify-content-center">
						<button mat-icon-button type="button" (click)="editClienteDomicilio(domicilios.id)" class="btn-primary" matTooltip="Editar domicilio" *ngxPermissionsOnly="'administrador.clientes.domicilios.show'">
							<mat-icon>create</mat-icon>
						</button>&nbsp; &nbsp;
						<button mat-icon-button type="button" (click)="deleteClienteDomicilio(domicilios)" class="btn-primary" matTooltip="Eliminar domicilio" *ngxPermissionsOnly="'administrador.clientes.domicilios.destroy'">
							<mat-icon>delete</mat-icon>
						</button>
					</mat-cell>
				</ng-container>

				<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
				<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
			</mat-table>
			<div class="mat-table__message" *ngIf="dataSourceClientesDomicilios.data.length == 0">No se encontraron registros.</div>
			<div class="mat-table__message" *ngIf="showMessageWait">Espera un momento....</div>
		</div>

		<div class="mat-table__bottom">
			<mat-spinner [diameter]="25" *ngIf="isLoading"></mat-spinner>
			<mat-paginator [pageSize]="perPage" [pageSizeOptions]="pages" [length]="total" (page)="paginator($event)"></mat-paginator>
		</div>
	</kt-portlet-body>

</kt-portlet>
