<h1 mat-dialog-title>
  {{ T.F.SYNC.D_AUTH_CODE.TITLE | translate: { provider: data.providerName } }}
</h1>

<mat-dialog-content>
  @if (!isNativePlatform) {
    <div class="auth-code-flex">
      <mat-form-field [style.order]="codeRequested() ? -1 : 1">
        <mat-label>{{ T.F.SYNC.D_AUTH_CODE.L_AUTH_CODE | translate }}</mat-label>
        <mat-icon matPrefix>vpn_key</mat-icon>
        <input
          #authCodeInput
          matInput
          autocomplete="off"
          autocapitalize="off"
          autocorrect="off"
          spellcheck="false"
          [(ngModel)]="token"
        />
      </mat-form-field>

      <div>
        <p>{{ T.F.SYNC.D_AUTH_CODE.FOLLOW_LINK | translate }}</p>
        <a
          mat-button
          color="primary"
          target="_blank"
          mat-stroked-button
          [href]="data.url"
          (click)="onGetAuthCode(authCodeInput)"
        >
          <mat-icon>open_in_new</mat-icon>
          {{ T.F.SYNC.D_AUTH_CODE.GET_AUTH_CODE | translate }}</a
        >

        <details class="manual-url-fallback">
          <summary>{{ T.F.SYNC.D_AUTH_CODE.MANUAL_URL_HINT | translate }}</summary>
          <code class="manual-url">{{ data.url }}</code>
        </details>
      </div>
    </div>
  }

  @if (isNativePlatform) {
    <p>{{ T.F.SYNC.D_AUTH_CODE.FOLLOW_LINK_MOBILE | translate }}</p>
    <a
      mat-button
      color="primary"
      target="_blank"
      mat-stroked-button
      [href]="data.url"
    >
      <mat-icon>open_in_new</mat-icon>
      {{ T.F.SYNC.D_AUTH_CODE.GET_AUTH_CODE | translate }}</a
    >

    <details class="manual-url-fallback">
      <summary>{{ T.F.SYNC.D_AUTH_CODE.MANUAL_URL_HINT | translate }}</summary>
      <code class="manual-url">{{ data.url }}</code>
    </details>

    <br />
    <br />
    <div class="oauth-waiting">
      <mat-spinner diameter="24"></mat-spinner>
      <span>{{ T.F.SYNC.D_AUTH_CODE.WAITING_FOR_AUTH | translate }}</span>
    </div>
  }
</mat-dialog-content>

<mat-dialog-actions align="end">
  <div class="wrap-buttons">
    <button
      (click)="close()"
      mat-button
    >
      {{ T.G.CANCEL | translate }}
    </button>
    @if (!isNativePlatform) {
      <button
        (click)="close(token)"
        [disabled]="!token"
        color="primary"
        mat-flat-button
      >
        <mat-icon>save</mat-icon>
        {{ T.G.SAVE | translate }}
      </button>
    }
  </div>
</mat-dialog-actions>
