<ion-header>

  <ion-navbar color="dark">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>View Project</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 *ngIf="found">
    <ion-card class="project">
      <ion-card-header class="h">
          <ion-card-title class="title">{{project.projectName}}</ion-card-title>
      </ion-card-header>
    <ion-card-content class="c"> 
      <ion-card-title class="subt">{{project.projectThumb}}</ion-card-title>
      <hr>
      <p class="desc">{{project.projectDesc}}</p>
      <div  *ngIf="hasTags">
        <p class="label"><strong>Tags:</strong></p>
        <div class="wrapper">
          <span *ngFor="let p of project.tags; let i = index">
            <button ion-button round icon-only small color="warm"> &emsp;{{p}} &emsp;</button>
          </span>
          </div>
        </div>
        <ion-grid>
        <ion-row>
          <ion-col>
            <small class="pos" center>Total Positions:</small>
            <p class="posnum" center>{{project.maxMembers}}</p>
          </ion-col>
          <ion-col>
            <small class="pos" center>Positions Available:</small>
            <p class="posnum" center>{{pos}}</p>
          </ion-col>
        </ion-row>
        </ion-grid>
      <div *ngIf="hasMembers">
        <p class="label"><strong>Members:</strong></p>
        <div class="wrapper">
          <span *ngFor="let m of project.projectMembers; let i = index">
            <button ion-button round icon-only small color="danger" (click)="goToProfile(m)"> &emsp;{{m}} &emsp;</button>
          </span>
        </div>
      </div>
      <ion-row>
        <ion-col center text-center>
          <button color="danger" ion-button icon-left clear small (click)="toggleMessages()">
            <ion-icon name="chatboxes"></ion-icon>
            <div>{{showMessages ? "Hide Comments" : "Comments"}}</div>
          </button>
        </ion-col>
        <ion-col center text-center>
          <button color="warm" ion-button icon-left clear small (click)="addFavourite(project)">
            <ion-icon name="star"></ion-icon>
            <div>Favourite</div>
          </button>
        </ion-col>
      </ion-row>
        <div *ngIf="showMessages" >
          <hr>
          <div *ngFor="let c of project.comments; let i = index">  
              <ion-row>
                <ion-col col-4>
                 <p><strong>{{c.username}}</strong></p>
                </ion-col>
                <ion-col col-8>
                  <p>{{c.comment}}</p>
                </ion-col>
                </ion-row>
                <hr>
          </div>
          <ion-item>
              <ion-input type="text" name="comment" placeholder="Comment" [(ngModel)]="comment"></ion-input>
              <button ion-button clear item-right color="danger"><ion-icon name="add-circle" (click)="addComment()"></ion-icon></button>
            </ion-item>
        </div>
    </ion-card-content>
    <div class class="footer">
          <ion-note class="wrapper">
          {{project.time | date:'medium'}}
        </ion-note>
      </div>
  </ion-card>
  <div *ngIf="cFound">
    <ion-card>
      <ion-row>
        <ion-col col-3>
          <img class="user-avatar round" [src]="choosenPicture" onerror="this.src='assets/img/profile/default-profile.jpg'"/>
        </ion-col>
        <ion-col col-9>
          <ion-card-title class="creatortitle">{{creator.username}}</ion-card-title>
        </ion-col>
      </ion-row>
      <ion-card-content>
        <div *ngIf="!isCreator" class="wrapper">
          <button color="danger" block ion-button (click)="creatorProfile()">VIEW PROFILE</button>
        </div>
        <div *ngIf="isCreator" class="wrapper">
          <button color="danger" block ion-button (click)="editProject()">EDIT</button>
        </div>
      </ion-card-content>
    </ion-card>
  </div>
  </div>
<div class="wrapper" *ngIf="!found">
  <h1>404 Not Found</h1>
</div>
</ion-content>