<ion-header>
    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>SALDO MY</ion-title>
      <ion-buttons end>

      </ion-buttons>
  
    </ion-navbar>
  </ion-header>
  
  <ion-content class="new2018">
   <div *ngIf="user?.id != '0'">
    <h2>Saldo disponible</h2>
    <ion-card>
      <ion-card-header class="pay-balance">
        <h3>$ {{ balance | number }}</h3>
      </ion-card-header>
    </ion-card>

    <h2>Tarjetas de crédito</h2>
    <ion-card *ngIf="cards.length == 0">
      <ion-card-header class="no-items">
        <img src="assets/img/debit-card.png" />
        <br /> No tienes tarjetas enroladas
        <br /><br />
        <button ion-button small outline (tap)="addCard()">Agrega una tarjeta</button>
      </ion-card-header>
    </ion-card>
    <ion-card *ngFor="let card of cards; let i = index;" class="credit-card">
      <ion-grid>
        <ion-row>
          <ion-col col-3>
            <ion-icon name="card"></ion-icon>
          </ion-col>
          <ion-col col-6>
            <h3>{{card.cc_type}} | {{card.last4digits}}</h3>
            <h4>Desde: {{card.auth_at | date: 'dd/MM/yyyy HH:mm'}}</h4>
          </ion-col>
          <ion-col col-3 class="card-tools">
            <a (tap)="deleteTarjeta(i)">
              <ion-icon name="trash"></ion-icon>
            </a>
          </ion-col>
        </ion-row>
      </ion-grid>
      
    </ion-card>

    <h2>Pre-abono Webpay</h2>
    <ion-card>
      <p>Con el preabono webpay guarda saldo en tu billetera virtual de MY, tu saldo estará protegido para tu próximo abono.</p>
      <ion-item>
        <ion-label>Monto:</ion-label>
        <ion-input type="tel" [(ngModel)]="amount"></ion-input>
      </ion-item>
      <br />
      <div class="action-button">
        <button ion-button small outline (tap)="loadBalance()">Carga saldo</button>
      </div>
    </ion-card>
  </div>
  <div *ngIf="user?.id == '0'">
    <h2>Saldo disponible</h2>
    <ion-card>
      <ion-card-header class="pay-balance" text-wrap>
        <h4>Solo los usuarios registrados tienen acceso a una cuenta de saldos</h4>
      </ion-card-header>
    </ion-card>
  </div>
  <br /><br /><br /><br />
  </ion-content>