<ion-header>

  <ion-navbar color="dark">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Search Users</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">
    </ion-refresher-content>
  </ion-refresher>

  <div class="wrapper" *ngIf="!found">
    <h1>404 Not Found</h1>
  </div>

  <div *ngIf="found">
    <ion-searchbar [(ngModel)]="query"> </ion-searchbar>
    <div *ngFor="let u of users | reverse | filterusers:query">
      <ion-card>
        <ion-row>
          <ion-col col-3>
            <img class="user-avatar round" [src]="'assets/img/profile/'+u.gender+'.jpg'" onerror="this.src='assets/img/profile/default-profile.jpg'"/>
          </ion-col>
          <ion-col col-9>
            <ion-card-title class="usertitle">{{u.username}}</ion-card-title>
          </ion-col>
        </ion-row>
        <ion-card-content>
          <div class="wrapper">
            <p>{{u.occupation}} &bull; {{u.email}}</p>
            <div *ngIf="u.ratings.rating.sum_of_rates != null">
              <p><strong>{{u.ratings.rating.sum_of_rates / u.ratings.rating.rate_count}} stars</strong></p>
            </div>
            <span *ngFor="let skill of u.skills; let i = index">
              <ion-chip color="warm">
                <ion-label>{{skill}}</ion-label>
              </ion-chip>
            </span>
          </div>
          <button color="danger" block ion-button (click)="viewProfile(u)">VIEW PROFILE</button>
        </ion-card-content>
      </ion-card>
    </div>
  </div>

</ion-content>
