<div class="app-admin-login-page">
  <div class="app-admin-login-page__card">
    <h1 class="app-admin-login-page__title">Admin sign-in</h1>
    <p class="app-admin-login-page__description">
      Sign in with your device's Ed25519 key. A challenge is requested from the server, signed locally, and
      verified - your private key never leaves this device.
    </p>

    @if (!isEd25519Supported) {
      <p class="app-admin-login-page__warning" role="alert">
        This browser does not support Ed25519 (requires WebCrypto + IndexedDB). Use an up-to-date browser.
      </p>
    }

    @if (lastError()) {
      <p class="app-admin-login-page__error" role="alert">{{ lastError()?.message }}</p>
    }

    @if (phaseLabel()) {
      <p class="app-admin-login-page__phase">{{ phaseLabel() }}</p>
    }

    <app-button variant="primary" [fullWidth]="true" [loading]="isBusy()" [disabled]="!isEd25519Supported || isBusy()" (click)="signIn()">
      Sign in
    </app-button>
  </div>
</div>
