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


<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)" pullMin="80">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Desliza para actualizar" refreshingSpinner='dots' refreshingText="Actualizando...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-card *ngIf="finanzas.length + thc.length == 0">
    <ion-card-header class="no-items" *ngIf="user?.id != '0'">
      <img src="assets/img/history-button.png" />
      <br /> No tienes movimientos
    </ion-card-header>
    <ion-card-header class="no-items" *ngIf="user?.id == '0'">
      <img src="assets/img/history-button.png" />
      <br /> Usuarios invitados no tienen historial
    </ion-card-header>
  </ion-card>
  <div *ngIf="finanzas.length > 0">
    <h1>Movimientos financieros</h1>
    <ion-list *ngFor="let t of finanzas; let i = index">
        <ion-item>
          <ion-grid>
            <ion-row>
              <ion-col col-2>{{dateformat(t.move_date)}}</ion-col>
              <ion-col col-6>{{t.description}}</ion-col>
              <ion-col col-4 text-right>$ {{t.amount | number}}</ion-col>
            </ion-row>
          </ion-grid>
        </ion-item>
      </ion-list>
  </div>

  <div *ngIf="thc.length > 0 && !appInvite">
    <h1>Movimientos THC</h1>
    <ion-list *ngFor="let t of thc; let i = index">
      <ion-item>
        <ion-grid>
          <ion-row>
              <ion-col col-2>{{dateformat(t.move_date)}}</ion-col>
              <ion-col col-6>{{t.description}}</ion-col>
              <ion-col col-4 text-right>{{t.amount | number}} grs</ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
    </ion-list>
  </div>
</ion-content>