<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>MIS RECETAS</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (tap)="addReceta()">
        <ion-icon name="add"></ion-icon>
      </button>
    </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="prescriptions.length == 0">
    <ion-card-header class="no-items">
      <img src="assets/img/prescription.png" />
      <br /> No tienes recetas activas
      <br /><br />
      <button ion-button small outline (tap)="addReceta()">Agrega una receta</button>
    </ion-card-header>
  </ion-card>
  <ion-card *ngFor="let prescription of prescriptions; let i = index">
    <ion-grid>
      <ion-row>
        <ion-col col-3 text-center class="prescription-head">
          <img src="assets/img/prescription.png" class="subicon" />
          <h2>ID./ {{prescription.id}}</h2>
          <h4>Enviada:<br />{{prescription.upload_at | date: 'dd/MM/yyyy'}}</h4>
        </ion-col>
        <ion-col col-6>
          <b>Resumen</b>
          <ion-grid class="prescription-info">
            <ion-row>
              <ion-col col-4>
                <h4>{{prescription.total_days_in_range | number}}</h4>
                días               
              </ion-col>
              <ion-col col-4>
                <h4>{{prescription.total_qty_in_range | number}}</h4>
                grs/disp
              </ion-col>
              <ion-col col-4>
                <h4>{{prescription.used_qty | number}}</h4>
                grs/uso
              </ion-col>
            </ion-row>
          </ion-grid>
          <hr />
          Desde {{prescription.start_at | date: 'dd/MM/yyyy'}}<br />
          Hasta {{prescription.expire_at | date: 'dd/MM/yyyy'}}
        </ion-col>
        <ion-col col-3 text-center class="prescription-tools">
          <div text-right>
            <span class="status-declined" *ngIf="prescription.status == '-1'">Rechazada</span>
            <span class="status-accepted" *ngIf="prescription.status == '1'">Aceptada</span>
            <span class="status-waiting" *ngIf="prescription.status == '0'">En revisión</span>
            <span class="status-expire" *ngIf="prescription.status == '2'">Expirada</span>
          </div>
          <br />
          <a (tap)="eliminarReceta(i)" *ngIf="prescription.status == '0'">
            <ion-icon name="trash"></ion-icon>
          </a>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card>

</ion-content>