<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title class="ion-text-center">{{ 'TAB4_TITLE' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card *ngIf="userProvider._infoUser">
    <ion-item (click)="goToEditProfileUser()" lines="none">
      <ion-avatar slot="start">
        <img src="../../../assets/img/default_profile.png"
          *ngIf="userProvider._infoUser.user_info && !userProvider._infoUser.user_info.photo && !userProvider._infoUser.user_info.photo_social" />
        <img src="{{ cityService._urlGallery }}avatars/{{ userProvider._infoUser.user_info.photo }}"
          *ngIf="userProvider._infoUser.user_info && userProvider._infoUser.user_info.photo" />
        <img src="{{ userProvider._infoUser.user_info.photo_social }}"
          *ngIf="userProvider._infoUser.user_info && userProvider._infoUser.user_info.photo_social" />
      </ion-avatar>
      <ion-label>
        <h2 class="no-margin-bottom">{{ userProvider._infoUser.first_name }} {{ userProvider._infoUser.last_name }}</h2>
        <p class="margin-bottom-12">{{ userProvider._infoUser.email }}</p>
      </ion-label>

      <ion-icon name="settings-outline" slot="end"></ion-icon>
    </ion-item>
  </ion-card>

  <ion-list>
    <ion-list-header no-margin> {{ 'OPTION_TITLE_ACCOUNT' | translate }} </ion-list-header>
    <!-- <ion-item *ngFor="let section of dataSections"
      (click)="goToSection(section.name, section.path, section.button_link)">
      <ion-icon class="icon-edit" name="help-circle-outline" slot="start" *ngIf="!section.icon_name"></ion-icon>
      <ion-icon class="icon-edit" [name]="section.icon_name" slot="start" *ngIf="section.icon_name"></ion-icon>
      {{ section.name }}
      <ion-chip slot="end" color="primary" class="chip_new" *ngIf="section.chip_new">
        <ion-label color="light">{{ 'NEW' | translate }}</ion-label>
      </ion-chip>
    </ion-item> -->
    <ion-item (click)="goToUserOrders()" *ngIf="sectionService.validateSection('Mis pedidos')">
      <ion-icon class="icon-edit" src="assets/img/icons/shopping.svg" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_ORDERS' | translate }}
      <ion-badge color="primary" slot="end" *ngIf="orderProvider._pendingOrders && orderProvider._pendingOrders.length">
        {{ (orderProvider._pendingOrders && orderProvider._pendingOrders.length > 0 ) ?
        orderProvider._pendingOrders.length : null }}
      </ion-badge>
    </ion-item>
    <ion-item (click)="goToTickets()" *ngIf="sectionService.validateSection('Boletería')">
      <ion-icon class="icon-edit" name="list-outline" slot="start"></ion-icon>
      {{ 'TITLE_TICKETS' | translate }}
    </ion-item>
    <ion-item (click)="goToCardList()" *ngIf="sectionService.validateSection('Mis Carnés')">
      <ion-icon class="icon-edit" name="id-card-outline" slot="start"></ion-icon>
      {{ 'TITLE_HOME_SUB_BUTTON4' | translate }}
    </ion-item>
    <!-- <ion-item (click)="goToSubscriberCard()">
      <ion-icon class="icon-edit" name="id-card-outline" slot="start"></ion-icon>
      {{ 'TITLE_SIMBOLIC_TICKET' | translate }}
    </ion-item> -->
    <!-- <ion-item (click)="goToCoins()" hidden>
      <ion-icon class="icon-edit" src="assets/img/icons/coins-solid.svg" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_COINS' | translate }}
    </ion-item> -->
    <ion-item (click)="goToListAddress()" *ngIf="sectionService.validateSection('Direcciones')">
      <ion-icon class="icon-edit" src="assets/img/icons/location.svg" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_ADDRESSES' | translate }}
    </ion-item>
    <ion-item (click)="goToStatistics()" *ngIf="sectionService.validateSection('Datos y estadísticas')">
      <ion-icon class="icon-edit" src="assets/img/icons/statistics.svg" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_STATISTICS' | translate }}
    </ion-item>
    <!-- <ion-item (click)="goToListCards()">
      <ion-icon name="card-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_CARDS' | translate }}
    </ion-item> -->
    <!-- <ion-item (click)="goToTour()">
      <ion-icon name="cube-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_TOUT' | translate }}
    </ion-item> -->
    <!-- <ion-item (click)="goToTourPatprimo()">
      <ion-icon name="cube-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_TOUT' | translate }} Patprimo
    </ion-item> -->
    <!-- <ion-item (click)="goToReferFriends()">
      <ion-icon name="people-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_REFER_FRIENDS' | translate }}
    </ion-item> -->
    <ion-item (click)="goToDorsal()" *ngIf="sectionService.validateSection('Dorsal')">
      <ion-icon src="assets/img/icons/dorsal.svg" slot="start"></ion-icon>
      {{ 'LABEL_TTITLE_6' | translate }}
    </ion-item>
    <ion-item (click)="goToPlayers()" *ngIf="sectionService.validateSection('Equipo')">
      <ion-icon class="icon-edit" name="shield-outline" slot="start"></ion-icon>
      {{ 'LABEL_TTITLE_7' | translate }}
    </ion-item>
    <ion-item (click)="goToSocial()" *ngIf="sectionService.validateSection('Redes Sociales')">
      <ion-icon class="icon-edit" src="assets/img/icons/social-media.svg" slot="start"></ion-icon>
      {{ 'LABEL_TTITLE_10' | translate }}
    </ion-item>
    <!-- <ion-item (click)="goToVideo()">
      <ion-icon class="icon-edit" src="assets/img/icons/tv.svg" slot="start"></ion-icon>
      {{ 'LABEL_TTITLE_5' | translate }}
    </ion-item> -->
    <ion-item (click)="goToBookcase()" *ngIf="sectionService.validateSection('Revista')">
      <ion-icon class="icon-edit" src="assets/img/icons/magazine.svg" slot="start"></ion-icon>
      {{ 'LABEL_TTITLE_4' | translate }}
    </ion-item>
    <ion-item (click)="goToRadio()" *ngIf="sectionService.validateSection('Pódcast')">
      <ion-icon class="icon-edit" src="assets/img/icons/podcast.svg" slot="start"></ion-icon>
      {{ 'LABEL_TTITLE_3' | translate }}
    </ion-item>
    <ion-item (click)="goToWallet()" *ngIf="sectionService.validateSection('Club Beneficios')">
      <ion-icon class="icon-edit" src="assets/img/icons/wallet.svg" slot="start"></ion-icon>
      {{ 'LABEL_TTITLE_2' | translate }}
    </ion-item>
    <ion-item (click)="goToPolls()" *ngIf="sectionService.validateSection('Toques')">
      <ion-icon class="icon-cup" src="assets/img/icons/cup.svg" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_POLLS' | translate }}
    </ion-item>

    <!-- <ion-item (click)="goToAlbum()">
      <ion-icon class="icon-edit" src="assets/img/icons/book-outline.svg" slot="start"></ion-icon>
      Album Academias Saprissa
    </ion-item> -->
    <!-- <ion-item (click)="goAR()">
      <ion-icon class="icon-edit" name="aperture-outline" slot="start"></ion-icon>
      {{ 'LABEL_TTITLE_1' | translate }}
    </ion-item> -->
  </ion-list>

  <ion-list>
    <ion-list-header no-margin> {{ 'OPTION_TITLE_HELP' | translate }} </ion-list-header>
    <ion-item (click)="openWhatsapp()">
      <ion-icon name="logo-whatsapp" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_WHATSAPP' | translate }}
    </ion-item>
    <!-- <ion-item (click)="goToMessages()">
      <ion-icon name="chatbubbles-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_MESSAGE' | translate }}
    </ion-item> -->
    <ion-item (click)="goToSuggestionsMailbox()" *ngIf="sectionService.validateSection('Mailbox')">
      <ion-icon name="archive-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_MAILBOX' | translate }}
    </ion-item>
    <ion-item (click)="openUrlPqr()" *ngIf="sectionService.validateSection('PQRS')">
      <ion-icon name="clipboard-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_PQR' | translate }}
    </ion-item>
    <ion-item (click)="openTermsSI()">
      <ion-icon name="document-outline" slot="start"></ion-icon>
      {{ 'TERMS_AND_CONDITIONS_2' | translate }}
    </ion-item>
    <ion-item (click)="openDataPolicy()" *ngIf="dataPolicyUrl">
      <ion-icon name="document-outline" slot="start"></ion-icon>
      {{ 'DATA_POLICY' | translate }}
    </ion-item>
    <ion-item (click)="goToFaq()" *ngIf="sectionService.validateSection('faq')">
      <ion-icon name="document-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_FAQ' | translate }}
    </ion-item>
  </ion-list>

  <ion-list *ngIf="userProvider._infoUser.id != 2">
    <ion-list-header no-margin> {{ 'OPTION_TITLE_SECURITY' | translate }} </ion-list-header>
    <ion-item (click)="deleteAccount()">
      <ion-icon name="trash-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_DELETE_ACCOUNT' | translate }}
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-list-header no-margin> {{ 'OPTION_TITLE_INFORMATION' | translate }} </ion-list-header>
    <ion-item (click)="goToTutorial()" *ngIf="sectionService.validateSection('Tutorial')">
      <ion-icon name="phone-portrait-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_HOW_WORK' | translate }}
    </ion-item>
    <ion-item (click)="shareApp()">
      <ion-icon name="share-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_SHARE' | translate }}
    </ion-item>
    <ion-item (click)="logout()">
      <ion-icon name="log-out-outline" slot="start"></ion-icon>
      {{ 'OPTION_TITLE_LOGOUT' | translate }}
    </ion-item>
  </ion-list>

  <ion-item class="ion-text-center" lines="none">
    <ion-label class="textTittle" *ngIf="versionApp">Versión {{ versionApp }}</ion-label>
  </ion-item>
</ion-content>