<ion-header class="ion-no-border">
  <ion-toolbar>
    <!-- <ion-title class="ion-text-center px-0" *ngIf="addressLastUsed" (click)="changeAddress()">
      {{ addressLastUsed.direction }}
      <ion-icon name="caret-down-outline"></ion-icon>
    </ion-title> -->
    <ion-back-button defaultHref="/app/tabs/home" slot="start"></ion-back-button>
    <ion-title class="ion-text-center">{{ (cartProvider.storeType == 'main' ? 'TITLE_HOME_STORE_BUTTON' :
      'ACADEMY_ACTIONS_BUTTONS.STORE') | translate }}</ion-title>
    <ion-buttons slot="end">
      <div (click)="goToCart()">
        <ion-icon slot="icon-only" name="cart-outline"></ion-icon>
        <ion-badge color="secondary" class="badge-cart"
          *ngIf="cartProvider.productsCart && cartProvider.productsCart.length">{{ cartProvider.productsCart.length }}
        </ion-badge>
      </div>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event,false)">
    <ion-refresher-content pullingIcon="arrow-down-outline" refreshingSpinner="ios"></ion-refresher-content>
  </ion-refresher>

  <app-skeleton-progress [iscardhome]="true" [size]="homeProvider._listCategories.length" *ngIf="loading_skeleton">
  </app-skeleton-progress>

  <div *ngIf="!loading_skeleton">
    <ion-slides style="max-width: 640px;" #Slides *ngIf="banners && banners.length" [options]="slideOpts">
      <ion-slide style="display: block;" *ngFor="let banner of banners">
        <ion-card (click)="actionClickBanner(banner)">
          <img src="{{ cityProvider._urlGallery }}banners/{{ banner.image }}" />
          <ion-item lines="none">
            <ion-label color="medium" slot="start">{{ banner.description }}</ion-label>
            <ion-button fill="outline" slot="end" color="secondary">Ver más</ion-button>
          </ion-item>
        </ion-card>
      </ion-slide>
    </ion-slides>

    <div *ngIf="homeProvider._listSymbolicBallots && homeProvider._listSymbolicBallots.length">
      <ion-slides #SlidesTickets [options]="slideOptsTickets">
        <ion-slide *ngFor="let ticket of homeProvider._listSymbolicBallots | validateSimbolicTickets">
          <ion-card (click)="openDetailBallot(ticket)" class="card_ballot">
            <img class="image_symbolic" [ngClass]="{'image_tickets_disabled': !ticket.is_salable}"
              src="{{ cityProvider._urlGallery }}symbolic_tickets/{{ ticket.path_image }}" alt="ballot" />
          </ion-card>
        </ion-slide>
      </ion-slides>
    </div>

    <ion-grid style="max-width: 640px;"
      *ngIf="homeProvider._listCategories && homeProvider._listCategories.length <= maximumCategoryCards">
      <ion-row class="g-2 mb-2" *ngFor="let category of homeProvider._listCategories; let i = index; let even = even">
        <ion-card class="ion-no-margin" (click)="openItemCategory(homeProvider._listCategories[i])">
          <img src="{{ cityProvider._urlGallery }}categories/{{ homeProvider._listCategories[i].image }}"
            class="imageListCategoriesBasic" />
          <ion-card-header class="ion-no-padding ion-text-center p-2">
            <ion-card-subtitle>{{ homeProvider._listCategories[i].name }} ➜ </ion-card-subtitle>
          </ion-card-header>
        </ion-card>
      </ion-row>
    </ion-grid>

    <ion-grid style="max-width: 640px;"
      *ngIf="homeProvider._listCategories && homeProvider._listCategories.length > maximumCategoryCards">
      <ion-row class="g-2 mb-2" *ngFor="let category of homeProvider._listCategories; let i = index; let even = even">
        <span *ngIf="i % 2 == 0" class="displayContents">
          <ion-col no-margin no-padding (click)="openItemCategory(homeProvider._listCategories[i])">
            <ion-card class="ion-no-margin">
              <img src="{{ cityProvider._urlGallery }}categories/{{ homeProvider._listCategories[i].image }}"
                class="imageListCategories" />
              <ion-card-header class="ion-no-padding ion-text-center p-2">
                <ion-card-subtitle>{{ homeProvider._listCategories[i].name }}</ion-card-subtitle>
              </ion-card-header>
            </ion-card>
          </ion-col>
          <ion-col no-margin no-padding *ngIf="homeProvider._listCategories[i+1]"
            (click)="openItemCategory(homeProvider._listCategories[i+1])">
            <ion-card class="ion-no-margin">
              <img src="{{ cityProvider._urlGallery }}categories/{{ homeProvider._listCategories[i+1].image }}"
                class="imageListCategories" />
              <ion-card-header class="ion-no-padding ion-text-center p-2">
                <ion-card-subtitle>{{ homeProvider._listCategories[i+1].name }}</ion-card-subtitle>
              </ion-card-header>
            </ion-card>
          </ion-col>
        </span>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>