<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">Nouveau mot de passe</h1>
      <p class="auth-subtitle">
        Choisissez un nouveau mot de passe sécurisé pour votre compte.
      </p>
    </div>

    <!-- Content -->
    <div class="auth-content">
      @if (!initialized()) {
        <!-- Loading State -->
        <div class="form-field">
          <p class="info-message">Chargement en cours...</p>
        </div>
      } @else if (success()) {
        <!-- Success Message -->
        <div class="form-field">
          <div class="success-message">
            <strong>Votre mot de passe a été réinitialisé avec succès !</strong>
            <br />
            Vous pouvez maintenant vous connecter avec votre nouveau mot de passe.
          </div>
        </div>

        <!-- Login Link Button -->
        <a routerLink="/login" class="auth-btn">
          <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="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
              <polyline points="10 17 15 12 10 7"></polyline>
              <line x1="15" y1="12" x2="3" y2="12"></line>
            </svg>
            Se connecter
          </span>
        </a>
      } @else {
        <!-- Reset Password Form -->
        <form class="auth-form" [formGroup]="passwordForm" (ngSubmit)="finishReset()">

          <!-- Global Error Messages -->
          @if (error()) {
            <div class="form-field">
              <p class="error-message">
                <strong>Une erreur est survenue !</strong>
                <br />
                La réinitialisation de votre mot de passe n'a pas pu être effectuée. Veuillez demander un nouveau lien de réinitialisation.
              </p>
            </div>
          }

          @if (doNotMatch()) {
            <div class="form-field">
              <p class="error-message">
                <strong>{{ validationMessages.password.mismatch }}</strong>
                <br />
                Veuillez vous assurer que les deux mots de passe sont identiques.
              </p>
            </div>
          }

          <!-- New Password Field -->
          <div class="form-field">
            <label for="newPassword" class="form-label">Nouveau mot de passe</label>
            <div class="input-wrapper">
              <input
                #newPassword
                type="password"
                id="newPassword"
                formControlName="newPassword"
                class="form-input"
                [class.error]="passwordForm.get('newPassword')?.invalid && passwordForm.get('newPassword')?.touched"
                placeholder="Entrez votre nouveau mot de passe"
                autocomplete="new-password"
              />
              <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">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
              </span>
            </div>

            <!-- Error Messages for New Password -->
            @if (passwordForm.get('newPassword')?.hasError('required') && passwordForm.get('newPassword')?.touched) {
              <p class="error-message">{{ validationMessages.password.required }}</p>
            }
            @if (passwordForm.get('newPassword')?.hasError('minlength') && passwordForm.get('newPassword')?.touched) {
              <p class="error-message">{{ validationMessages.password.minLength }}</p>
            }
            @if (passwordForm.get('newPassword')?.hasError('maxlength')) {
              <p class="error-message">{{ validationMessages.password.maxLength }}</p>
            }

            <p class="info-message">
              Le mot de passe doit contenir entre {{ passwordConfig.minLength }} et {{ passwordConfig.maxLength }} caractères.
            </p>
          </div>

          <!-- Confirm Password Field -->
          <div class="form-field">
            <label for="confirmPassword" class="form-label">Confirmer le mot de passe</label>
            <div class="input-wrapper">
              <input
                type="password"
                id="confirmPassword"
                formControlName="confirmPassword"
                class="form-input"
                [class.error]="(passwordForm.get('confirmPassword')?.invalid && passwordForm.get('confirmPassword')?.touched) || doNotMatch()"
                placeholder="Confirmez votre nouveau mot de passe"
                autocomplete="new-password"
              />
              <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">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
              </span>
            </div>

            <!-- Error Messages for Confirm Password -->
            @if (passwordForm.get('confirmPassword')?.hasError('required') && passwordForm.get('confirmPassword')?.touched) {
              <p class="error-message">{{ validationMessages.password.required }}</p>
            }
            @if (passwordForm.get('confirmPassword')?.hasError('minlength') && passwordForm.get('confirmPassword')?.touched) {
              <p class="error-message">{{ validationMessages.password.minLength }}</p>
            }
            @if (passwordForm.get('confirmPassword')?.hasError('maxlength')) {
              <p class="error-message">{{ validationMessages.password.maxLength }}</p>
            }
          </div>

          <!-- Submit Button -->
          <button
            type="submit"
            class="auth-btn"
            [disabled]="passwordForm.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">
                <polyline points="20 6 9 17 4 12"></polyline>
              </svg>
              Réinitialiser le mot de passe
            </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>
