<ion-content>
  <div style="padding: 48px">
    <ng-container *ngIf="!restarted; else refresh">
      <h1 class="ion-text-center" style="padding-bottom: 36px; font-size: calc(2vw + 14px);">EmbassyOS - Diagnostic Mode</h1>
      <h2 style="padding-bottom: 16px; font-size: calc(1vw + 14px); font-weight: bold;">EmbassyOS launch error:</h2>
      <div class="code-block">
        <code><ion-text color="warning">{{ error.problem }}</ion-text></code>
      </div>
      <ion-button routerLink="logs">
        View Logs
      </ion-button>
      <h2 style="padding: 32px 0 16px 0; font-size: calc(1vw + 12px); font-weight: bold;">Possible solution:</h2>
      <div class="code-block">
        <code><ion-text color="success">{{ error.solution }}</ion-text></code>
      </div>
      <ion-button (click)="restart()">
        Restart Embassy
      </ion-button>
      <div *ngIf="error.code === 15 || error.code === 25" class="ion-padding-top">
        <ion-button *ngIf="error.code === 15" (click)="forgetDrive()">
          {{ error.code === 15 ? 'Setup Current Drive' : 'Enter Recovery Mode' }}
        </ion-button>
      </div>
    </ng-container>

    <ng-template #refresh>
      <h1 class="ion-text-center" style="padding-bottom: 36px; font-size: calc(2vw + 12px);">Embassy is restarting</h1>
      <h2 style="padding-bottom: 16px; font-size: calc(1vw + 12px);">Wait for Embassy restart, then refresh this page or click REFRESH below.</h2>
      <ion-button (click)="refreshPage()">
        Refresh
      </ion-button>
    </ng-template>
  </div>
</ion-content>
