<ion-header>

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

</ion-header>


<ion-content padding 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 *ngIf="!found" class="wrapper">
    <h3 >404 Not Found</h3>
  </div>
  <ion-card class="greeting">
    <ion-img style="width: 40px; height: 40px;background-color: #ffffff;" src="assets/img/logo/birds.png"></ion-img>
    <h1>Hello {{user.firstName}}!</h1>
    <p>Would you like to make a new project?</p>
    <button color="danger" small ion-button (click)="newProject()">NEW PROJECT</button>
  </ion-card>
  <hr>
  <div *ngFor="let p of projects | reverse">
    <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<0 ? p.maxMembers - p.projectMembers.length : "0"}}</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>
