@if (api.authenticated()) {
  <router-outlet />
} @else {
  <main class="access-shell">
    <section class="access-panel" aria-labelledby="access-title">
      <div class="brand-row">
        <div class="brand-mark" aria-hidden="true">V</div>
        <div>
          <div class="brand-name">VOC 数据中台</div>
          <div class="brand-sub">利润与成本看板</div>
        </div>
      </div>

      <form (ngSubmit)="unlock()">
        <h1 id="access-title">看板验证</h1>

        <label for="dashboard-key">访问密钥</label>
        <input
          id="dashboard-key"
          name="dashboardKey"
          type="password"
          autocomplete="current-password"
          [(ngModel)]="accessKey"
          [disabled]="checking"
          [attr.aria-invalid]="!!error"
          [attr.aria-describedby]="error ? 'access-error' : null"
          autofocus
        />

        @if (error) {
          <p id="access-error" class="access-error" role="alert">{{ error }}</p>
        }

        <button type="submit" [disabled]="checking || !accessKey.trim()">
          {{ checking ? '验证中...' : '进入看板' }}
        </button>
      </form>
    </section>
  </main>
}