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

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

    <!-- always -->
    <ion-item>
      <ion-label>
        <h2>
          Adding WiFi credentials to your Embassy allows you to remove the Ethernet cable and move the device anywhere you want. Embassy will automatically connect to available networks.
          <a href="https://docs.start9.com/user-manual/general/wifi.html" target="_blank" rel="noreferrer">View instructions</a>
        </h2>
      </ion-label>
    </ion-item>

    <ion-item-divider>Country</ion-item-divider>

    <!-- not loading -->
    <ion-item button detail="false" (click)="presentAlertCountry()" [disabled]="loading">
      <ion-icon slot="start" name="earth-outline" size="large"></ion-icon>
      <ion-label *ngIf="wifi.country">{{ wifi.country }} - {{ this.countries[wifi.country] }}</ion-label>
      <ion-label *ngIf="!wifi.country">Select Country</ion-label>
    </ion-item>

    <!-- loading  -->
    <ng-container *ngIf="loading">
      <ion-item-divider>Saved Networks</ion-item-divider>
      <ion-item *ngFor="let entry of ['', '']" class="skeleton-parts">
        <ion-button slot="start" fill="clear">
          <ion-skeleton-text animated style="width: 30px; height: 30px; border-radius: 0;"></ion-skeleton-text>
        </ion-button>
        <ion-label>
          <ion-skeleton-text animated style="width: 18%;"></ion-skeleton-text>
        </ion-label>
      </ion-item>
    </ng-container>

    <!-- not loading -->
    <ng-container *ngIf="!loading && wifi.country">
      <ion-item-divider>Saved Networks</ion-item-divider>
      <ion-item button detail="false" (click)="presentModalAdd()">
        <ion-icon slot="start" name="add" size="large"></ion-icon>
        <ion-label>Add new network</ion-label>
      </ion-item>
      <ion-item button detail="false" *ngFor="let ssid of wifi.ssids; let i = index;" (click)="presentAction(ssid, i)">
        <div *ngIf="ssid !== wifi.connected" slot="start" style="padding-right: 32px;"></div>
        <ion-icon *ngIf="ssid === wifi.connected" slot="start" size="large" name="checkmark" color="success"></ion-icon>
        <ion-label>{{ ssid }}</ion-label>
        <ng-container *ngIf="ssid === wifi.connected && wifi['signal-strength'] as strength">
          <img *ngIf="strength < 5" slot="end" src="assets/img/icons/wifi-1.png" style="max-width: 32px;" />
          <img *ngIf="strength >= 5 && strength < 50" slot="end" src="assets/img/icons/wifi-1.png" style="max-width: 32px;" />
          <img *ngIf="strength >= 50 && strength < 90" slot="end" src="assets/img/icons/wifi-2.png" style="max-width: 32px;" />
          <img *ngIf="strength >= 90" slot="end" src="assets/img/icons/wifi-3.png" style="max-width: 32px;" />
        </ng-container>
      </ion-item>
    </ng-container>
  </ion-item-group>
</ion-content>