<div class="modal-card max-w-md w-full bg-deep-blue rounded-lg shadow-xl p-6 relative">
  <button
    (click)="closeDialog.emit()"
    class="absolute top-4 right-4 text-text-secondary hover:text-white transition-colors"
    aria-label="Dialog schließen"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  </button>

  <h2 class="modal-heading text-center">
    @if (isResetMode()) {
      Passwort zurücksetzen
    } @else {
      Passwort vergessen
    }
  </h2>

  @if (errorMessage()) {
    <div class="bg-accent-red text-white p-4 rounded mb-4">
      {{ errorMessage() }}
    </div>
  }

  @if (successMessage()) {
    <div class="bg-emerald text-white p-4 rounded mb-4">
      {{ successMessage() }}
    </div>
  }

  @if (!isResetMode()) {
    <!-- Request Password Reset Form -->
    <form [formGroup]="emailForm" (ngSubmit)="onSubmitEmail()" class="space-y-4">
      <div class="mb-6">
        <p class="text-text-secondary text-sm mb-4">
          Gib deine E-Mail-Adresse ein, und wir senden dir einen Link zum Zurücksetzen deines
          Passworts.
        </p>
      </div>

      <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"
        />

        @if (emailFormControls['email'].touched && emailFormControls['email'].errors) {
          <div class="text-accent-red mt-1 text-sm">
            @if (emailFormControls['email'].errors['required']) {
              <span>E-Mail ist erforderlich</span>
            }
            @if (emailFormControls['email'].errors['email']) {
              <span>Bitte gib eine gültige E-Mail-Adresse ein</span>
            }
          </div>
        }
      </div>

      <div class="pt-2">
        <button
          type="submit"
          [disabled]="emailForm.invalid || isLoading()"
          class="button-primary w-full py-2.5 rounded"
        >
          {{ isLoading() ? 'Wird gesendet...' : 'Link zum Zurücksetzen senden' }}
        </button>
      </div>
    </form>
  }

  @if (isResetMode()) {
    <!-- Reset Password Form -->
    <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmitReset()" class="space-y-4">
      <div class="mb-6">
        <p class="text-text-secondary text-sm mb-4">Gib dein neues Passwort ein.</p>
      </div>

      <div>
        <label for="password" class="text-text-secondary text-sm font-medium mb-1 block">
          Neues 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 neues Passwort ein"
        />

        @if (resetFormControls['password'].touched && resetFormControls['password'].errors) {
          <div class="text-accent-red mt-1 text-sm">
            @if (resetFormControls['password'].errors['required']) {
              <span>Passwort ist erforderlich</span>
            }
            @if (resetFormControls['password'].errors['minlength']) {
              <span>Passwort muss mindestens 8 Zeichen lang sein</span>
            }
          </div>
        }
      </div>

      <div>
        <label for="confirmPassword" class="text-text-secondary text-sm font-medium mb-1 block">
          Passwort bestätigen
        </label>
        <input
          id="confirmPassword"
          type="password"
          formControlName="confirmPassword"
          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="Bestätige dein neues Passwort"
        />

        @if (
          resetFormControls['confirmPassword'].touched &&
          (resetFormControls['confirmPassword'].errors ||
            resetPasswordForm.errors?.['passwordMismatch'])
        ) {
          <div class="text-accent-red mt-1 text-sm">
            @if (resetFormControls['confirmPassword'].errors?.['required']) {
              <span>Passwortbestätigung ist erforderlich</span>
            }
            @if (resetPasswordForm.errors?.['passwordMismatch']) {
              <span>Passwörter stimmen nicht überein</span>
            }
          </div>
        }
      </div>

      <div class="pt-2">
        <button
          type="submit"
          [disabled]="resetPasswordForm.invalid || isLoading()"
          class="button-primary w-full py-2.5 rounded"
        >
          {{ isLoading() ? 'Wird aktualisiert...' : 'Passwort aktualisieren' }}
        </button>
      </div>
    </form>
  }

  <div class="mt-6 text-center">
    <p class="text-sm text-text-secondary">
      <button
        (click)="goBackToLogin()"
        class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
      >
        Zurück zum Login
      </button>
    </p>
  </div>
</div>
