<!--
  Generated template for the ProfilePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>{{ user.username }}</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="presentProfileMenu($event)">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content>

  <img src="{{ user.content.cover_image.link }}">

  <ion-item>
    <ion-avatar item-start>
      <img src="{{ user.content.avatar_image.link }}">
    </ion-avatar>
    <h2>{{ user.name }}</h2>
    <p>@{{ user.username }}</p>
    <ion-col item-end text-right>
      <button ion-button [disabled]="myUsername == user.username" (click)="followUser()">{{ user.you_follow ? "Unfollow" : "Follow" }}</button>
      <ion-note>{{ user.follows_you ? "Follows you" : ""}}</ion-note>
    </ion-col>
  </ion-item>

  <div padding [innerHTML]="user.content.html | parser"></div>
  <ion-row padding>
    <ion-col>
      <ion-row>
        <button ion-button full clear>{{ user.counts.posts }}<br/>posts</button>
      </ion-row>
      <ion-row>
        <button ion-button full (click)="showUserList('Followers')">{{ user.counts.followers }}<br/>followers</button>
      </ion-row>
    </ion-col>
    <ion-col>
      <ion-row>
        <button ion-button full clear>{{ user.counts.bookmarks }}<br/>stars</button>
      </ion-row>
      <ion-row>
        <button ion-button full (click)="showUserList('Following')">{{ user.counts.following }}<br/>following</button>
      </ion-row>
    </ion-col>
  </ion-row>

  <ion-segment [(ngModel)]="activeTab">
    <ion-segment-button value="posts">Posts</ion-segment-button>
    <ion-segment-button value="bookmarks">Stars</ion-segment-button>
  </ion-segment>

  <div [ngSwitch]="activeTab">

    <div *ngSwitchCase="'posts'">
      <ion-list>
        <ion-card *ngFor="let post of posts" color="{{ post.you_are_mentioned ? 'mention' : '' }}">
          <post [post]="post" [hideImg]="hideImg" [ccOnReply]="ccOnReply" [myUsername]="myUsername"></post>
        </ion-card>
      </ion-list>
    </div>

    <div *ngSwitchCase="'bookmarks'">
      <ion-list>
        <ion-card *ngFor="let post of bookmarks" color="{{ post.you_are_mentioned ? 'mention' : '' }}">
          <post [post]="post" [hideImg]="hideImg" [ccOnReply]="ccOnReply" [myUsername]="myUsername"></post>
        </ion-card>
      </ion-list>
    </div>

    <ion-infinite-scroll (ionInfinite)="fetchOlderPosts($event, activeTab)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>

  </div>

</ion-content>
