<ion-header>
  <ion-navbar>
    <ion-title>Games</ion-title>


    <ion-buttons end>
      <button ion-button icon-only (click)="sortGamesByName()" color="black">
        <ion-icon name="arrow-down"></ion-icon>
      </button>
  </ion-buttons>

    <ion-buttons end>
        <button ion-button icon-only (click)="getGamesByUserId()" color="primary">
          <ion-icon name="briefcase"></ion-icon>
        </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button icon-only (click)="openModal()" color="secondary">
        <ion-icon name="add-circle"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>
</ion-header>

<ion-content class = "games-content" padding>
  <ion-list>
    <ion-item-sliding  *ngFor="let game of userGames" (click)="openSummary({id:game.id})">
    <ion-item>
        <ion-thumbnail item-start>
            <img src="{{game.imageURL}}">
        </ion-thumbnail>
      <h2><strong>{{game.title}}</strong></h2>
      <h3>{{ game.studio }}</h3>
      <h4>{{ game.platform }}</h4>
      <!-- <ion-buttons>
          <ion-icon [name]="visible ? 'checkmark-circle' : ''"></ion-icon>
      </ion-buttons> -->
      
    </ion-item>

    <ion-item-options side="left">
        <button ion-button color="primary" (click)="doCompleteGame()">
          <ion-icon name="add"></ion-icon> Complete
        </button>
    </ion-item-options>

    <ion-item-options side="right">
        <button ion-button color="secondary" (click)="doUpdateGame()">
          <ion-icon name="add"></ion-icon> Update
        </button>
    </ion-item-options>

  </ion-item-sliding>
  </ion-list>
</ion-content>
