<app-header></app-header>

<h1>Configuración imágenes</h1>
<br>
<span class="fa fa-search form-control-lg form-control-search pl-3"></span>
<input
  type="text"
  class="form-control form-control-lg shadow-sm rounded-pill px-5"
  placeholder="Búsqueda productos"
  [(ngModel)]="searchTerm"
  (ngModelChange)="filterItems()">

<div class="row px-5">
  <h5>Productos</h5>
  <table class="table">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Descripción</th>
        <th>Imagen</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let articulo of auxProductos">
        <td>{{articulo.DetArt}}</td>
        <td>{{articulo.DET_LAR}}</td>
        <td>
          <img *ngIf="articulo.imagenes.length" src="{{apiUrl}}/imagenes/{{articulo.imagenes[0].imagen}}">
          <img id="{{articulo.CodSec + articulo.CodArt}}" [hidden]="articulo.imagenes.length">
        </td>
        <td><input type="file" accept="image/*" (change)="onFileSelected($event, articulo)"></td>
      </tr>
    </tbody>
  </table>
</div>