<div class="dialog-overlay" (click)="closeDialog()">
  <div class="dialog-card" (click)="$event.stopPropagation()">
    <div class="dialog-head">
      <span class="brand-tag">NowChess // Auth</span>
      <button type="button" class="close-btn" (click)="closeDialog()" aria-label="Close">×</button>
    </div>

    <h2 class="dialog-title">Welcome back</h2>
    <div class="dialog-subtitle">Sign in to continue your match</div>

    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <div class="field">
        <label for="username" class="field-label">Username</label>
        <input id="username" type="text" class="dialog-input" formControlName="username"
          placeholder="your_handle" autocomplete="username" />
        @if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {
          <small class="text-danger">Username must be at least 3 characters</small>
        }
      </div>

      <div class="field">
        <label for="password" class="field-label">Password</label>
        <input id="password" type="password" class="dialog-input" formControlName="password"
          placeholder="••••••••" autocomplete="current-password" />
        @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
          <small class="text-danger">Password must be at least 6 characters</small>
        }
      </div>

      @if (errorMessage) {
        <div class="error-banner">{{ errorMessage }}</div>
      }

      <div class="dialog-actions">
        <button type="button" class="btn btn-ghost" (click)="closeDialog()">Cancel</button>
        <button type="submit" class="btn btn-primary" [disabled]="isLoading || loginForm.invalid">
          @if (isLoading) {
            <span class="spinner" aria-hidden="true"></span>
          }
          {{ isLoading ? 'Signing in…' : 'Sign in' }}
        </button>
      </div>

      <div class="alt-line">
        New here?<a (click)="openRegister()">Create an account</a>
      </div>
    </form>
  </div>
</div>
