<app-navbar />

<div class="min-h-screen bg-deep-blue flex items-center justify-center">
  <div class="modal-card max-w-md w-full">
    <h2 class="modal-heading text-center">Anmelden</h2>

    <div *ngIf="errorMessage" class="bg-accent-red text-white p-4 rounded mb-4">
      {{ errorMessage }}
    </div>

    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-4">
      <div>
        <label for="usernameOrEmail" class="text-text-secondary text-sm font-medium mb-1 block">
          Benutzername oder E-Mail
        </label>
        <input
          id="usernameOrEmail"
          type="text"
          formControlName="usernameOrEmail"
          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
          placeholder="Gib deinen Benutzernamen oder E-Mail ein"
        />

        <div
          *ngIf="form['usernameOrEmail'].touched && form['usernameOrEmail'].errors"
          class="text-accent-red mt-1 text-sm"
        >
          <span *ngIf="form['usernameOrEmail'].errors?.['required']">
            Benutzername oder E-Mail ist erforderlich
          </span>
        </div>
      </div>

      <div>
        <label for="password" class="text-text-secondary text-sm font-medium mb-1 block">
          Passwort
        </label>
        <input
          id="password"
          type="password"
          formControlName="password"
          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
          placeholder="Gib dein Passwort ein"
        />

        <div
          *ngIf="form['password'].touched && form['password'].errors"
          class="text-accent-red mt-1 text-sm"
        >
          <span *ngIf="form['password'].errors?.['required']">Passwort ist erforderlich</span>
        </div>
      </div>

      <div class="pt-2">
        <button
          type="submit"
          [disabled]="loginForm.invalid || isLoading"
          class="button-primary w-full py-2.5 rounded"
        >
          {{ isLoading ? 'Anmeldung läuft...' : 'Anmelden' }}
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm text-text-secondary">
        Noch kein Konto?
        <a
          routerLink="/register"
          class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
        >
          Registrieren
        </a>
      </p>
    </div>
  </div>
</div>
