<a class="back-link" routerLink="/login">
  <mat-icon>arrow_back</mat-icon>
  Back to login options
</a>

<div class="login-header">
  <div class="header-icon">
    <mat-icon>business</mat-icon>
  </div>
  <h2>Department Login</h2>
  <p class="login-subtitle">Sign in with your department credentials</p>
</div>

<form [formGroup]="form" (ngSubmit)="onSubmit()" class="login-form">
  <mat-form-field appearance="outline">
    <mat-label>Department Code</mat-label>
    <input
      matInput
      formControlName="departmentCode"
      placeholder="e.g., FIRE_DEPT"
      autocomplete="username"
    />
    @if (form.controls.departmentCode.hasError('required')) {
      <mat-error>Department code is required</mat-error>
    }
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>API Key</mat-label>
    <input
      matInput
      [type]="hidePassword() ? 'password' : 'text'"
      formControlName="apiKey"
      placeholder="Enter your API key"
      autocomplete="current-password"
    />
    <mat-icon
      matSuffix
      class="password-toggle"
      (click)="togglePasswordVisibility()"
      [attr.aria-label]="hidePassword() ? 'Show password' : 'Hide password'"
    >
      {{ hidePassword() ? 'visibility_off' : 'visibility' }}
    </mat-icon>
    @if (form.controls.apiKey.hasError('required')) {
      <mat-error>API key is required</mat-error>
    }
  </mat-form-field>

  <button
    mat-raised-button
    color="primary"
    type="submit"
    class="submit-button"
    [disabled]="loading()"
  >
    @if (loading()) {
      <mat-spinner diameter="24"></mat-spinner>
    } @else {
      Sign In
    }
  </button>
</form>

<!-- Demo Credentials (for POC) -->
<div class="demo-credentials">
  <div class="demo-title">
    <mat-icon>info</mat-icon>
    Demo Credentials
  </div>
  <ul class="demo-list">
    <li class="demo-item">
      <span class="dept-name">Fire Department</span>
      <span class="dept-code">FIRE_DEPT</span>
    </li>
    <li class="demo-item">
      <span class="dept-name">Tourism Department</span>
      <span class="dept-code">TOURISM</span>
    </li>
    <li class="demo-item">
      <span class="dept-name">Municipality</span>
      <span class="dept-code">MUNICIPALITY</span>
    </li>
  </ul>
</div>
