<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <pwa-back-button></pwa-back-button>
    </ion-buttons>
    <ion-title>Active Sessions</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top">

  <!-- loading -->
  <ion-item-group *ngIf="loading">
    <div *ngFor="let entry of ['This Session', 'Other Sessions']">  
      <ion-item-divider>{{ entry }}</ion-item-divider>
      <ion-item style="padding-bottom: 6px;">
        <ion-avatar slot="start" style="margin-right: 30px;">
          <ion-skeleton-text animated style="width: 40px; height: 40px; border-radius: 0;"></ion-skeleton-text>
        </ion-avatar>
        <ion-label>
          <ion-skeleton-text animated style="width: 150px; height: 20px; margin-bottom: 10px;"></ion-skeleton-text>
          <ion-skeleton-text animated style="width: 250px; height: 14px; margin-bottom: 12px;"></ion-skeleton-text>
          <ion-skeleton-text animated style="width: 350px;"></ion-skeleton-text>
        </ion-label>
        <ion-button *ngIf="entry === 'second'" slot="end" fill="clear">
          <ion-skeleton-text animated style="width: 60px; border-radius: 0"></ion-skeleton-text>
        </ion-button>
      </ion-item>
    </div>
  </ion-item-group>

  <!-- not loading -->
  <ion-item-group *ngIf="!loading">

    <ion-item-divider>This Session</ion-item-divider>
    <ion-item *ngIf="sessionInfo.sessions[sessionInfo.current] as current">
      <ion-icon slot="start" size="large" [name]="getPlatformIcon(current.metadata.platforms)"></ion-icon>
      <ion-label>
        <h1>{{ getPlatformName(current.metadata.platforms) }}</h1>
        <h2>Last Active: {{ current['last-active'] | date : 'medium' }}</h2>
        <p>{{ current['user-agent'] }}</p>
      </ion-label>
    </ion-item>

    <ion-item-divider>Other Sessions</ion-item-divider>
    <div *ngFor="let session of sessionInfo.sessions | keyvalue : asIsOrder;">
      <ion-item 
        [id]="session.key"
        *ngIf="session.key !== sessionInfo.current"
      >
        <ion-icon slot="start" size="large" [name]="getPlatformIcon(session.value.metadata.platforms)"></ion-icon>
        <ion-label>
          <h1>{{ getPlatformName(session.value.metadata.platforms) }}</h1>
          <h2>Last Active: {{ session.value['last-active'] | date : 'medium' }}</h2>
          <p>{{ session.value['user-agent'] }}</p>
        </ion-label>
        <ion-button slot="end" fill="clear" color="danger" (click)="presentAlertKill(session.key)">
          <ion-icon slot="start" name="close"></ion-icon>
          Kill
        </ion-button>
      </ion-item>
    </div>
  </ion-item-group>

</ion-content>