<div class="auth-page-container forgot-password-page">
  <div class="auth-card">
    <!-- Header -->
    <div class="auth-header">
      <div class="logo">{{APP_CONFIG.app.name}}</div>
      <h1 class="auth-title">Mot de passe oublié ?</h1>
      <p class="auth-subtitle">
        Entrez votre adresse e-mail et nous vous enverrons un lien pour réinitialiser votre mot de passe.
      </p>
    </div>

    <!-- Content -->
    <div class="auth-content">
      @if (success()) {
        <!-- Success Message -->
        <div class="form-field">
          <div class="success-message">
            <strong>Un e-mail de réinitialisation a été envoyé !</strong>
            <br />
            Veuillez consulter votre boîte de réception et suivre les instructions pour réinitialiser votre mot de passe.
          </div>
        </div>
      } @else {
        <!-- Reset Form -->
        <form class="auth-form" [formGroup]="resetRequestForm" (ngSubmit)="requestReset()">
          <!-- Email Field -->
          <div class="form-field">
            <label for="email" class="form-label">Adresse e-mail</label>
            <div class="input-wrapper">
              <input
                #email
                type="email"
                id="email"
                formControlName="email"
                class="form-input"
                [class.error]="resetRequestForm.get('email')?.invalid && resetRequestForm.get('email')?.touched"
                placeholder="votre@email.com"
                autocomplete="email"
              />
              <span class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                  <polyline points="22,6 12,13 2,6"></polyline>
                </svg>
              </span>
            </div>

            <!-- Error Messages -->
            @if (resetRequestForm.get('email')?.hasError('required') && resetRequestForm.get('email')?.touched) {
              <p class="error-message">{{ validationMessages.email.required }}</p>
            }
            @if (resetRequestForm.get('email')?.hasError('email') && resetRequestForm.get('email')?.touched) {
              <p class="error-message">{{ validationMessages.email.invalid }}</p>
            }
            @if (resetRequestForm.get('email')?.hasError('minlength') && resetRequestForm.get('email')?.touched) {
              <p class="error-message">{{ validationMessages.email.minLength }}</p>
            }
            @if (resetRequestForm.get('email')?.hasError('maxlength')) {
              <p class="error-message">{{ validationMessages.email.maxLength }}</p>
            }
          </div>

          <!-- Submit Button -->
          <button
            type="submit"
            class="auth-btn"
            [disabled]="resetRequestForm.invalid"
          >
            <span>
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
              </svg>
              Envoyer le lien de réinitialisation
            </span>
          </button>
        </form>
      }
    </div>

    <!-- Footer -->
    <div class="auth-footer">
      <p>
        Vous vous souvenez de votre mot de passe ?
        <a routerLink="/login" class="back-to-login-link">Retour à la connexion</a>
      </p>
    </div>
  </div>
</div>
