<ion-header>

  <ion-navbar color="dark">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Favourites</ion-title>
  </ion-navbar>

</ion-header>


<ion-content class="masters">
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
  <div *ngFor="let p of projects">
    <ion-card>
      <ion-card-header class="h">
        <ion-row>
          <ion-col col-10 center text-center>
          <h2 class="htext">{{p.projectName}}</h2>
          </ion-col>
          <ion-col col-2 center text-center>
            <ion-icon name="star" class="star" (click)="addFavourite(p)"></ion-icon>
          </ion-col>
        </ion-row>
      </ion-card-header>
      <ion-card-content class="c">
          <ion-grid>
            <ion-row>
              <ion-col col-9>
                <p> {{p.projectThumb}} </p>
              </ion-col>
              <ion-col class="center">
                <small class="pos" center>Positions:</small>
                <p class="posnum" center>{{p.maxMembers - p.projectMembers.length}}</p>
              </ion-col>
            </ion-row>
          </ion-grid>
      </ion-card-content>
      <ion-row>

        <ion-col col-4 center text-center>
          <button color="danger" ion-button icon-left clear small (click)="viewProject(p)">
            <div>View Project</div>
          </button>
        </ion-col>

        <ion-col col-8 center text-center>
          <ion-note class="d">
          {{p.time | date:'short'}}
          </ion-note>
        </ion-col>
      </ion-row>
  </ion-card>
  </div>

</ion-content>
