<div class="main-content">
  <div class="container-fluid">
    <div class="col-md-12">
      <div class="card">
          <div class="card-header card-header-green">
              <h4 class="card-title ">Productos</h4>
              <p class="card-category">Maestro de productos</p>
          </div>
          <div class="card-body">
              <div class="row">
                  <div class="col-md-4">
                      <mat-form-field class="example-full-width">
                          <input matInput placeholder="Filtrar por nombre" [(ngModel)]="filter.name">
                      </mat-form-field>
                  </div>
                  <div class="col-md-4">
                      <mat-form-field class="example-full-width">
                          <mat-select placeholder="Tipo" [(ngModel)]="filter.type">
                              <mat-option *ngFor="let type of types" [value]="type.id">
                                  {{type.name}}
                              </mat-option>
                          </mat-select>
                      </mat-form-field>
                  </div>
                  <div class="col-md-4 sys-actions">
                      <button mat-raised-button color="primary" (click)="filterdata()">Filtrar</button>
                      <button mat-raised-button class="create" (click)="addProduct()">Agregar</button>
                  </div>
              </div>
              
              <div class="table-responsive">
                  <table class="table table-hover table-bordered">
                      <thead>
                          <th>Imagen</th>
                          <th>Código</th>
                          <th>Nombre</th>
                          <th>Tipo</th>
                          <th>Stock Venta</th>
                          <th>Costo Pond.</th>
                          <th>Precio Venta</th>
                          <th>Opciones</th>
                      </thead>
                      <tbody>
                          <tr *ngIf="products.length == 0">
                              <td colspan="8">No existen registros disponibles</td>
                          </tr>
                          <tr *ngFor="let product of products; let i = index;">
                              <td><img src="{{product.image == '' ? '/assets/img/default.png' : product.image}}" class="erp-avatar" /></td>
                              <td>{{product.id }}</td>
                              <td>{{product.name}}</td>
                              <td>{{product.type_sale}}</td>
                              <td>{{product.stock_sale | number}}</td>
                              <td>{{product.cost | number }}</td>
                              <td>$ {{product.price | number}}</td>
                              <td>
                                  <button mat-stroked-button color="primary" (click)="editProduct(i)">Editar</button>
                                  <button mat-stroked-button color="warn" (click)="deleteProduct(i)">Eliminar</button>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>        
    </div>
  </div>
</div>
