<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-back-button slot="start"></ion-back-button>
    <ion-title class="ion-text-center">{{'ACADEMY' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

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

  <app-banner-slide *ngIf="banners && banners.length" [banners]="banners"></app-banner-slide>

  <div>
    <div class="ion-padding" style="margin-top: 50px;" *ngIf="academy_users.length === 0">
      <h3 class="ion-text-center">{{'THERE_ARE_NOT_STUDENTS' | translate}}</h3>
    </div>
    <div *ngIf="academy_users.length != 0">

      <ion-card class="h-214 card_container" (click)="selectAcademyUser()" *ngIf="academy_users.length > 1">
        <ion-item lines="inset">
          <ion-label>{{ selectedAcademyUser.student_name }} {{ selectedAcademyUser.student_last_name }}</ion-label>
          <ion-icon name="chevron-down-outline" slot="end"></ion-icon>
        </ion-item>
      </ion-card>

      <app-card-academy-user [academyUser]="selectedAcademyUser" (uploadPhoto)="loadInit(100, true)">
      </app-card-academy-user>

      <ion-grid *ngIf="!selectedAcademyUser.academy_state.app_components.includes('Ocultar botones')">
        <ion-row>
          <ion-col [size]="parButtons() ? 12 : 6">
            <div class="cardMainOptions" (click)="academyUserProfile(selectedAcademyUser)">
              <div class="cardSubMainOptions">
                <ion-icon name="person-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.STUDENT_PROFILE' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col size="6" *ngIf="selectedAcademyUser.academy_state.app_components.includes('Botón carné')">
            <div class="cardMainOptions" (click)="openUserCard(selectedAcademyUser)">
              <div class="cardSubMainOptions">
                <ion-icon name="id-card-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.CARNET' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col size="6"
            *ngIf="selectedAcademyUser.academy_state.app_components.includes('Botón actualizar información')">
            <div class="cardMainOptions" (click)="modalAcademyEnrollment(typeAcademy, selectedAcademyUser)">
              <div class="cardSubMainOptions">
                <ion-icon name="document-text-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.UPDATE_ENROLLMENT' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col size="6"
            *ngIf="selectedAcademyUser.academy_state.app_components.includes('Botón completar registro')">
            <div class="cardMainOptions" (click)="modalAcademyFullEnrollment(selectedAcademyUser)">
              <div class="cardSubMainOptions">
                <ion-icon name="document-text-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.COMPLETE_FULL_ENROLLMENT' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col size="6"
            *ngIf="selectedAcademyUser.academy_state.app_components.includes('Botón cargar documentos')">
            <div class="cardMainOptions" (click)="modalAcademyDocuments(selectedAcademyUser, typeAcademy)">
              <div class="cardSubMainOptions">
                <ion-icon name="document-text-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.UPLOAD_DOCUMENTS' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col size="6"
            *ngIf="selectedAcademyUser.academy_state.app_components.includes('Botón firmar documentos')">
            <div class="cardMainOptions" (click)="modalAcademyDocuments(selectedAcademyUser, typeAcademy, true)">
              <div class="cardSubMainOptions">
                <ion-icon name="pencil-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.SIGN_DOCUMENTS' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col [size]="validateIDCardButton() ? 12 : 6"
            *ngIf="selectedAcademyUser.academy_state.app_components.includes('Botón pagos')">
            <div class="cardMainOptions" (click)="academyUserPayments(selectedAcademyUser)">
              <div class="cardSubMainOptions">
                <ion-icon name="wallet-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.PAY' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col size="6" *ngIf="selectedAcademyUser.academy_state.app_components.includes('Botón informes')">
            <div class="cardMainOptions" (click)="goToSportsReport(selectedAcademyUser)">
              <div class="cardSubMainOptions">
                <ion-icon name="document-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.REPORTS' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col size="6" *ngIf="selectedAcademyUser.academy_state.app_components.includes('Botón torneos')">
            <div class="cardMainOptions" (click)="goToTournamentPayments(selectedAcademyUser)">
              <div class="cardSubMainOptions">
                <ion-icon name="football-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.TOURNAMENTS' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col size="6" *ngIf="selectedAcademyUser.academy_state.app_components.includes('Botón novedades')">
            <div class="cardMainOptions" (click)="goToNews(selectedAcademyUser)">
              <div class="cardSubMainOptions">
                <ion-icon name="alert-circle-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.NEWS' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col size="6"
            *ngIf="selectedAcademyUser.isRenewable && selectedAcademyUser.academy_state.app_components.includes('Renovacion matricula')">
            <div class="cardMainOptions" (click)="goToRenewal(selectedAcademyUser)">
              <div class="cardSubMainOptions">
                <ion-icon name="repeat-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.REGISTRATION_RENEWAL' | translate}}</h1>
            </div>
          </ion-col>
          <ion-col size="6" *ngIf="selectedAcademyUser.academy_state.app_components.includes('Botón tienda')">
            <div class="cardMainOptions" (click)="goToAcademyStore()">
              <div class="cardSubMainOptions">
                <ion-icon name="storefront-outline"></ion-icon>
              </div>
              <h1 class="cardTextOptions">{{'ACADEMY_ACTIONS_BUTTONS.STORE' | translate}}</h1>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
</ion-content>

<ion-footer>
  <ion-button expand="block" fill="solid" shape="round"
    class="ion-padding-start ion-padding-end ion-margin-bottom ion-margin-top" (click)="modalAcademyEnrollment(typeAcademy)">
    {{'ENROLL_STUDENT' | translate}}
  </ion-button>
</ion-footer>