<ion-header>

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

</ion-header>


<ion-content padding>
  <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 id="profile-bg" [ngStyle]="{'background-image': 'url(' + backgroundImage +')'}"></div>
  <div *ngIf="found"id="content">
    <div id="profile-info" padding>
     <img id="profile-image" [src]="choosenPicture" onerror="this.src='assets/img/profile/Female.jpg'"> 
      <h3 id="profile-name">{{user.username}}</h3>
      <p>{{user.occupation}} &bull; {{user.address}} &bull; {{user.email}}</p>
      <div *ngIf="user.ratings.rating.sum_of_rates != null">
        <p><strong>{{user.ratings.rating.sum_of_rates / user.ratings.rating.rate_count}} stars</strong></p>
      </div>
      <p class="profile-description">{{user.bio}}</p>
       <div *ngIf="currentUser">
        <button color="danger" ion-button icon-left clear small (click)="showRaters()">
          <div>Rates</div>
        </button>
      </div>
      <button color="danger" ion-button icon-left clear small (click)="toggleSkills()">
            <div>{{showSkills ? "Hide Skills" : "Show Skills"}}</div>
          </button>
      <div *ngIf="showSkills">
        <span *ngFor="let skill of user.skills; let i = index">
          <ion-chip color="warm">
            <ion-label>{{skill}}</ion-label>
          </ion-chip>
        </span>
      </div> 
      <div *ngIf="!currentUser">
        <button ion-button small color="danger" (click)="showPrompt()">RATE</button>
      </div>
      <div *ngIf="currentUser">
        <button ion-button small color="danger" (click)="editProfile()">EDIT</button>
      </div>
      <hr>
      <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"></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>
  </div> 
  </div>
  <div *ngIf="!found" id="content">
    <h3 id="profile-name">404 Not Found</h3>
  </div>

</ion-content>
