<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">Konto erstellen</h2>

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

    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-4">
      <div>
        <label for="email" class="text-text-secondary text-sm font-medium mb-1 block">E-Mail</label>
        <input
          id="email"
          type="email"
          formControlName="email"
          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 deine E-Mail-Adresse ein"
        />

        <div
          *ngIf="form['email'].touched && form['email'].errors"
          class="text-accent-red mt-1 text-sm"
        >
          <span *ngIf="form['email'].errors?.['required']">E-Mail ist erforderlich</span>
          <span *ngIf="form['email'].errors?.['email']">
            Bitte gib eine gültige E-Mail-Adresse ein
          </span>
        </div>
      </div>

      <div>
        <label for="username" class="text-text-secondary text-sm font-medium mb-1 block"
          >Benutzername</label
        >
        <input
          id="username"
          type="text"
          formControlName="username"
          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="Wähle einen Benutzernamen"
        />

        <div
          *ngIf="form['username'].touched && form['username'].errors"
          class="text-accent-red mt-1 text-sm"
        >
          <span *ngIf="form['username'].errors?.['required']">Benutzername ist erforderlich</span>
          <span *ngIf="form['username'].errors?.['minlength']">
            Benutzername muss mindestens 3 Zeichen haben
          </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="Erstelle ein Passwort"
        />

        <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>
          <span *ngIf="form['password'].errors?.['minlength']">
            Passwort muss mindestens 6 Zeichen haben
          </span>
        </div>
      </div>

      <div class="pt-2">
        <button
          type="submit"
          [disabled]="registerForm.invalid || isLoading"
          class="button-primary w-full py-2.5 rounded"
        >
          {{ isLoading ? 'Konto wird erstellt...' : 'Registrieren' }}
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm text-text-secondary">
        Bereits ein Konto?
        <a
          routerLink="/login"
          class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
        >
          Anmelden
        </a>
      </p>
    </div>
  </div>
</div>
