<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 ">Categorias/Familias</h4>
              <p class="card-category">Maestro de categorias y familias de productos</p>
          </div>
          <div class="card-body">
              <div class="row">
                  <div class="col-md-12 sys-actions">
                      <button mat-raised-button class="create" (click)="addCategory()">Agregar</button>
                  </div>
              </div>
              
              <div class="table-responsive">
                  <table class="table table-hover table-bordered">
                      <thead>
                          <th>Imagen</th>
                          <th>Categoría</th>
                          <th>Subcategoría</th>
                          <th>Opciones</th>
                      </thead>
                      <tbody>
                          <tr *ngIf="categories.length == 0">
                              <td colspan="5">No existen registros disponibles</td>
                          </tr>
                          <tr *ngFor="let category of categories; let i = index;">
                              <td><img src="{{category.banner == '' ? '/assets/img/default.png' : category.banner}}" class="erp-avatar" /></td>
                              <td>{{(category.parent == '0' ? category.name : '')}}</td>
                              <td>{{(category.parent == '0' ? '' : category.name)}}</td>
                              <td>
                                  <button mat-stroked-button color="primary" (click)="editCategory(i)">Editar</button>
                                  <button mat-stroked-button color="warn" (click)="deleteCategory(i)">Eliminar</button>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>        
    </div>
  </div>
</div>
