<div class="h-92 bg-white fade-in-left">
  <!-- PUBLICIDADES -->
  <app-header-publicidad></app-header-publicidad>

  <div class="row mx-0 h-80 align-items-end">
    <!-- CABECERA -->
    <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
      <div class="col-12 p-2 align-self-center">
        <div class="px-3">
          <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
        </div>
      </div>
    </div>
    <!-- CUERPO -->
    <div class="row w-100 mr-4 h-70">
      <div class="col-12 h-100 px-0 py-3">
        <div class="row mx-0 h-100">
          <!-- FILTRO CATEGORIAS -->
          <div class="col-5 col-sm-3 col-xl-2 h-100">
            <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
            <div class="row mx-0 h-94 justify-content-center align-items-center">
              <div class="col-auto btn-effect h-5">
                <img
                  draggable="false"
                  ondragstart="return false;"
                  (contextmenu)="false"
                  class="h-100 d-block mx-auto rotate-90-neg"
                  src="assets/img/ir-color.svg"
                  (mousedown)="scrollY(templateCategorias, -100)"
                  (mouseup)="mouseup()"
                  (mouseleave)="mouseup()">
              </div>
              <!-- CATEGORIAS -->
              <div
                #templateCategorias
                class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
                <div
                  class="row mx-4 mb-2 h-32 justify-content-center tab"
                  [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
                  (click)="selectCategoria(-1, 0)">
                  <img
                    draggable="false"
                    ondragstart="return false;"
                    (contextmenu)="false"
                    class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                    src="assets/img/logo-spot.svg">
                  <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
                </div>
                <div
                  class="row mx-4 mb-2 h-32 justify-content-center tab"
                  [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
                  (click)="selectCategoria(i, categoria.id)"
                  *ngFor="let categoria of categorias; let i = index;">
                  <img
                    draggable="false"
                    ondragstart="return false;"
                    (contextmenu)="false"
                    class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                    src="{{urlImagenes}}{{categoria.path_imagen}}">
                  <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                </div>
              </div>
              <div class="col-auto btn-effect h-5">
                <img
                  draggable="false"
                  ondragstart="return false;"
                  (contextmenu)="false"
                  class="h-100 d-block mx-auto rotate-90"
                  src="assets/img/ir-color.svg"
                  (mousedown)="scrollY(templateCategorias, 100)"
                  (mouseup)="mouseup()"
                  (mouseleave)="mouseup()">
              </div>
            </div>
          </div>
          <!-- LISTA DE ARTICULOS -->
          <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
            <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
              <!-- ARTICULO -->
              <div
                class="col px-2 my-1 my-md-3 h-auto"
                *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                <div class="swing-in-top-fwd card h-auto">
                  <div *ngIf="articulo.PRO">
                    <i class="fas fa-piggy-bank"></i>
                  </div>
                  <img
                    draggable="false"
                    ondragstart="return false;"
                    (contextmenu)="false"
                    src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                    onerror="this.src='assets/img/image-not-found.jpg'"
                    class="card-img-top h-55 rounded-sm">
                  <div class="row mx-0 py-1 h-auto justify-content-center">
                    <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">{{articulo.DetArt}}</p>
                    <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
                      <small>{{articulo.DET_LAR}}</small>
                    </p>
                    <div class="col-12 px-1 align-self-end btn-effect h-auto">
                      <div
                        [ngClass]="{'bg-secondary': articulo.promo}"
                        class="row mx-0 justify-content-between bg-primary badge-pill"
                        (click)="!articulo.FPP ? elegirArticulo(articulo) : openModalPromos(articulo, templatePromos)">
                        <div class="col px-0 align-self-center text-white text-right">
                          {{articulo.PreVen | currency}}
                        </div>
                        <div class="col-5 px-0">
                          <img
                            draggable="false"
                            ondragstart="return false;"
                            (contextmenu)="false"
                            class="d-block ml-auto py-1 icon-30"
                            src="assets/img/ir.svg">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- BOTON VER MAS -->
            <div class="row mx-0">
              <div
                *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                class="col-12 px-0 mb-2">
                <button
                  (click)="increaseShow()"
                  class="btn btn-block btn-outline-primary">
                  Ver Más
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- FOOTER CARRITO DE COMPRAS -->
    <div class="row w-90 mx-auto h-auto justify-content-center">
      <div class="col-12 h-75 px-0 border border-primary rounded">
        <!-- CABECERA -->
        <div class="row mx-0 h-15 border-bottom border-primary">
          <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
        </div>
        <!-- CUERPO -->
        <div class="row h-85 mx-0 justify-content-around">
          <!-- BOTON SCROLL IZQUIERDA -->
          <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
            <img
              draggable="false"
              ondragstart="return false;"
              (contextmenu)="false"
              class="icon-30 rotate-180-neg"
              src="assets/img/ir-fondo-color.svg"
              (mousedown)="scrollX(templateCarrito, -100)"
              (mouseup)="mouseup()"
              (mouseleave)="mouseup()">
          </div>
          <!-- CARRITO -->
          <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
            <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
              <!-- MENSAJE DE ADVERTENCIA -->
              <div *ngIf="!articuloService.carrito.length" class="col h-100">
                <p class="text-center py-5">No hay articulos en el carrito</p>
              </div>
              <!-- ARTICULOS -->
              <div
                class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
                *ngFor="let articulo of articuloService.carrito; let i = index;">
                <div class="swing-in-top-fwd">
                  <img
                    draggable="false"
                    ondragstart="return false;"
                    (contextmenu)="false"
                    class="d-block img-fluid p-2 mx-auto rounded"
                    src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                    onerror="this.src='assets/img/image-not-found.jpg'">
                  <p class="d-block mt-auto text-center text-primary text-truncate">
                    <small>{{articulo.DetArt}}</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- BOTON SCROLL DERECHA -->
          <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
            <img
              draggable="false"
              ondragstart="return false;"
              (contextmenu)="false"
              class="icon-30"
              src="assets/img/ir-fondo-color.svg"
              (mousedown)="scrollX(templateCarrito, 100)"
              (mouseup)="mouseup()"
              (mouseleave)="mouseup()">
          </div>
        </div>
      </div>
      <!-- VER CARRITO Y TOTAL-->
      <div
        class="col-auto p-0 mt-2 ml-auto h-20"
        *ngIf="articuloService.carrito.length">
        <div
          class="btn-effect col-auto align-self-center px-0 bg-white"
          [routerLink]="['/carrito']">
          <div class="row justify-content-between mx-0">
            <div class="col-auto align-self-center text-primary">TOTAL</div>
            <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
              <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
            </div>
            <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
            <div class="col-auto p-0 bg-primary d-none d-sm-block">
              <img
                draggable="false"
                ondragstart="return false;"
                (contextmenu)="false"
                class="p-2 icon-40"
                src="assets/img/carrito.svg">
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>

<ng-template #templatePromos>
  <div class="modal-header bg-primary">
    <div class="col-12">
      <div class="row justify-content-between" *ngIf="articuloPromo.length">
        <div>
          <h3 class="ml-2 text-white mt-2">{{articuloPromo[0].DetArt}}</h3>
        </div>
        <div class="row"(click)="elegirArticulo(articuloPromo[0]); modalRef.hide()">
          <div
            class="row mr-3 justify-content-between bg-white badge-pill">
            <div class="col px-0 align-self-center text-primary">
              <p class="font-weight-bold">{{articuloPromo[0].PreVen | currency}}</p> 
            </div>
            <div class="col-3 px-0">
              <img
                draggable="false"
                ondragstart="return false;"
                (contextmenu)="false"
                class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
                src="assets/img/ir-color.svg">
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 border-bottom mt-3 mx-n3"></div>
    </div>
  </div>
  <div class="modal-body bg-primary" *ngIf="articuloPromo.length">
    <div class="row">
      <div class="col-9">
        <p class="text-white"><small>¿TE GUSTARIA LLEVAR ESTE ARTÍCULO</small></p>
        <h1 class="text-white mb-4">en un combo?</h1>
        <div *ngFor="let promo of promociones">
          <div class="mx-0 bg-white badge-pill text-primary" (click)="elegirArticulo(promo); modalRef.hide()">
            <div class="row justify-content-between">
              <p class="ml-4 text-truncate">{{promo.DetArt}}</p>
              <p class="mr-4 font-weight-bold">{{promo.PreVen | currency}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3 rounded-circle">
        <img
        draggable="false"
        ondragstart="return false;"
        (contextmenu)="false"
        src="{{urlImagenes}}{{articuloPromo[0].imagenes[0].imagen}}"
        onerror="this.src='assets/img/image-not-found.jpg'"
        class="card-img-top h-90 w-90 rounded-circle">
      </div>
    </div>
  </div>
  </ng-template>