<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%">
      @if (!isLoading && cartShoppingEnabled) {
        <button mat-mini-fab class="raised-button-background white_font" aria-label="Ver Carrito" matTooltip="Ver carrito" [matBadge]="quantityShoppingCart" (click)="openShoppingCart()">
          <mat-icon>shopping_cart</mat-icon>
        </button>
      }
    </div>
  </header>
  @if (!isLoading && selectedFamiliesEnabled) {
    <mat-accordion class="mb-8">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            Filtro de artículos
          </mat-panel-title>
        </mat-expansion-panel-header>

        @if (!isLoading) {
          <nav class="nav_filter_content" [formGroup]="formGroup">
            <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 >
                @for (option of filteredOptionsFamily | async; track option) {
                  <mat-option [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>
                @for (option of filteredOptionsSubfamily | async; track option) {
                  <mat-option [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>
                @for (option of filteredOptionsProvider | async; track option) {
                  <mat-option [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>
                @for (option of filteredOptionsArtitle | async; track option) {
                  <mat-option [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>
  }

  @if (!isLoading && selectedArtitlesEnabled) {
    <section class="elevation-z8 container-cards">
      @for (artitle of arrArtitles; track artitle) {
        <mat-card class="card-personality" [matBadge]="null" (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>
      } @empty {
        <div class="empty">
          <object data="assets/img/empty_data.svg" width="150"></object>
          <span>No hay artículos para mostrar</span>
        </div>
      }
    </section>
  }

  <app-loading-card [isLoading]="isLoading" txtLoading="Cargando artículos" />
</body>