<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-back-button slot="start"></ion-back-button>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <!-- Header -->
  <div class="headerCoins">
    <div class="headerText">
      <h1 class="titlePoints">{{ 'AVAILABLE_CREDIT' | translate }}</h1>
    </div>
    <div class="coinsText">
      <img src="assets/img/coins/coin.png" width="46" alt="Coins">
      <h1 class="coins">{{ coins }}</h1>
      <h5 style="margin-top: revert;">({{ external_coins }} + {{ credit_coins }} credito)</h5>
      <a class="icon-info" (click)="presentAlert()">
        <ion-icon class="help" name="help-circle-outline"></ion-icon>
      </a>
    </div>
  </div>
  <!-- Body -->
  <div class="bodyCoins">
    <!-- Opciones -->
    <h2 class="titleOptions" disabled>{{ 'TITLE_OPTIONS_BUTTONS_COINS' | translate }}</h2>
    <section class="btnOptions">
      <div class="opt" (click)="filterCredit(1)">
        <div class="btn" [ngClass]="{'selectedFilter': selectedIndexCredit === 1}">
          <ion-icon class="iconOpt" name="card"></ion-icon>
        </div>
        {{ 'OPTION_CREDIT_COINS' | translate }}
      </div>
      <div class="opt" (click)="filterCredit(-1)">
        <div class="btn" [ngClass]="{'selectedFilter': selectedIndexCredit === -1}">
          <ion-icon class="iconOpt" name="cash"></ion-icon>
        </div>
        {{ 'OPTION_TRADE_COINS' | translate }}
      </div>
    </section>
    <!-- Historial -->
    <section class="history" *ngIf="selectedIndexCredit === 1">
      <ion-card class="cardInfoCoins" *ngFor="let transaction of creditTransactions">
        <app-card-coin [transaction]="transaction"></app-card-coin>
      </ion-card>
    </section>
    <section class="history" *ngIf="selectedIndexCredit === -1">
      <ion-card class="cardInfoCoins" *ngFor="let transaction of viewTransactions">
        <app-card-coin [transaction]="transaction"></app-card-coin>
      </ion-card>
    </section>
  </div>
</ion-content>