<body class="component-main-shopping animated fadeIn pl-12 pr-22">
  <header class="header-component">
    <app-btn-navigate style="width: 15%" [navigate]="'goback'" [widthPosition]="'0'" />
    <div class="align-center" style="width: 70%;">
      <span class="override-main-title">Selección de Artículos</span>
    </div>
    <div class="align-end" style="width: 15%">
      <!-- <button mat-mini-fab class="gray_dark_background white_font" matTooltip="Ver Carrito" [matBadge]="quantityCarArtitle" (click)="openShoppingCart()">
        <mat-icon>shopping_cart</mat-icon>
      </button> -->

      <button mat-mini-fab color="warn" aria-label="Ver Carrito" matTooltip="Ver Carrito" [matBadge]="quantityCarArtitle" (click)="openShoppingCart()" *ngIf="!isLoading && cartShoppingEnabled">
        <mat-icon>shopping_cart</mat-icon>
      </button>
    </div>
  </header>
  <mat-accordion *ngIf="!isLoading && selectedFamiliesEnabled" class="mb-8">
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Filtro de Artículos
        </mat-panel-title>
      </mat-expansion-panel-header>
      <nav class="nav_filter_content" [formGroup]="formGroup" *ngIf="!isLoading">
        <mat-form-field appearance="outline" class="item_filter">
          <mat-label>Familia</mat-label>
          <input matInput formControlName="FAMILY" type="text" [matAutocomplete]="autocompleteFamily" >
          <mat-autocomplete autoActiveFirstOption #autocompleteFamily >
            <mat-option *ngFor="let option of filteredOptionsFamily | async" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
          <mat-icon matSuffix>import_contacts</mat-icon>
        </mat-form-field>
    
        <mat-form-field appearance="outline" class="item_filter">
          <mat-label>Subamilia</mat-label>
          <input matInput formControlName="SUBFAMILY" type="text" [matAutocomplete]="autocompleteSubfamily">
          <mat-autocomplete autoActiveFirstOption #autocompleteSubfamily>
            <mat-option *ngFor="let option of filteredOptionsSubfamily | async" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
          <mat-icon matSuffix>import_contacts</mat-icon>
        </mat-form-field>
    
        <mat-form-field appearance="outline" class="item_filter">
          <mat-label>Proveedor</mat-label>
          <input matInput formControlName="PROVIDER" type="text" [matAutocomplete]="autocompleteProvider">
          <mat-autocomplete autoActiveFirstOption #autocompleteProvider>
            <mat-option *ngFor="let option of filteredOptionsProvider | async" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
          <mat-icon matSuffix>person</mat-icon>
        </mat-form-field>
    
        <mat-form-field appearance="outline" class="item_filter">
          <mat-label>Artículo</mat-label>
          <input matInput formControlName="ARTITLE" type="text" [matAutocomplete]="autocompleteArtitle">
          <mat-autocomplete autoActiveFirstOption #autocompleteArtitle>
            <mat-option *ngFor="let option of filteredOptionsArtitle | async" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
          <mat-icon matSuffix>category</mat-icon>
        </mat-form-field>
    
        <div class="item_filter_actions">
          <button mat-mini-fab color="primary" matTooltip="Filtrar" class="mr-4 no-shadow" (click)="setFilter()">
            <mat-icon>search</mat-icon>
          </button>
          <button mat-mini-fab color="warn" matTooltip="Eliminar Filtro" class="no-shadow" (click)="removeFilter()">
            <mat-icon>close</mat-icon>
          </button>
        </div>
      </nav>
    </mat-expansion-panel>
  </mat-accordion>
  

  <!-- <section class="container-cards" *ngIf="!isLoading"> -->
  <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
  <section class="elevation-z8 container-cards" *ngIf="!isLoading && selectedArtitlesEnabled">

    <mat-card class="card-personality" [matBadge]="null" *ngFor="let artitle of arrArtitles" (click)="openArtitle(artitle)">
      <mat-card-header>
        <mat-card-title > {{ artitle.MODELO }}</mat-card-title>
        <mat-card-subtitle class="text-subtitle"> {{ artitle.FAMILIA }} - {{ artitle.SUBFAMILIA }} </mat-card-subtitle>
      </mat-card-header>
      <mat-card-content class="card-image">
        <img mat-card-image [src]="artitle.URL_IMAGEN[0]" [alt]="artitle.URL_IMAGEN[0]">
      </mat-card-content>
      <!-- <mat-card-actions class="card-accions">
        <i> {{ artitle.PROVEEDOR }}</i>
      </mat-card-actions> -->
    </mat-card>

    <div *ngIf="arrArtitles.length === 0" class="empty">
      <object data="assets/img/empty_data.svg" width="150"></object>
      <span>No hay artículos para mostrar</span>
    </div>
  </section>

  <div *ngIf="isLoading">
    <app-loading-card
      [isLoading]="isLoading"
      [txtLoading]="'Cargando Artículos'"
    />
  </div>
</body>