<div class="auth-page-container register-page">
  <div class="auth-card">
    <div class="auth-header">
      <div class="logo">{{APP_CONFIG.app.name}}</div>
      <h1 class="auth-title">Créer un compte</h1>
      <p class="auth-subtitle">Rejoignez-nous dès maintenant et commencez votre aventure.</p>
    </div>

    <div class="auth-content">
      <!-- Success Message -->
      @if (success()) {
        <div class="alert alert-success">
          <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 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
          </svg>
          <div>
            <strong>Inscription réussie !</strong>
            <p>Un email de confirmation vous a été envoyé. Veuillez vérifier votre boîte de réception.</p>
          </div>
        </div>
      }

      <!-- Error Messages -->
      @if (error()) {
        <div class="alert alert-danger">
          <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">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
          </svg>
          <p>Une erreur s'est produite lors de l'inscription. Veuillez réessayer.</p>
        </div>
      }

      @if (errorUserExists()) {
        <div class="alert alert-danger">
          <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">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
          </svg>
          <p>Ce nom d'utilisateur est déjà utilisé. Veuillez en choisir un autre.</p>
        </div>
      }

      @if (errorEmailExists()) {
        <div class="alert alert-danger">
          <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">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
          </svg>
          <p>Cette adresse email est déjà utilisée. Veuillez vous connecter ou utiliser une autre adresse.</p>
        </div>
      }

      @if (doNotMatch()) {
        <div class="alert alert-danger">
          <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">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
          </svg>
          <p>{{ validationMessages.password.mismatch }}</p>
        </div>
      }

      @if (!success()) {
        <form [formGroup]="registerForm" (ngSubmit)="register()" class="auth-form">

          <!-- Login/Username Field -->
          <div class="form-field">
            <label for="login" class="form-label">Nom d'utilisateur</label>
            <div class="input-wrapper">
              <input
                #login
                id="login"
                type="text"
                formControlName="login"
                class="form-input"
                placeholder="Votre nom d'utilisateur"
                [class.error]="registerForm.get('login')?.invalid && registerForm.get('login')?.touched"
              >
              <svg class="input-icon" 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="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
            </div>
            @if (registerForm.get('login')?.hasError('required') && registerForm.get('login')?.touched) {
              <span class="error-message">{{ validationMessages.username.required }}</span>
            }
            @if (registerForm.get('login')?.hasError('minlength') && registerForm.get('login')?.touched) {
              <span class="error-message">{{ validationMessages.username.minLength }}</span>
            }
            @if (registerForm.get('login')?.hasError('maxlength') && registerForm.get('login')?.touched) {
              <span class="error-message">{{ validationMessages.username.maxLength }}</span>
            }
            @if (registerForm.get('login')?.hasError('pattern') && registerForm.get('login')?.touched) {
              <span class="error-message">{{ validationMessages.username.pattern }}</span>
            }
          </div>

          <!-- Email Field -->
          <div class="form-field">
            <label for="email" class="form-label">Email</label>
            <div class="input-wrapper">
              <input
                id="email"
                type="email"
                formControlName="email"
                class="form-input"
                placeholder="votre.email@exemple.com"
                [class.error]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched"
              >
              <svg class="input-icon" 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>
            </div>
            @if (registerForm.get('email')?.hasError('required') && registerForm.get('email')?.touched) {
              <span class="error-message">{{ validationMessages.email.required }}</span>
            }
            @if (registerForm.get('email')?.hasError('email') && registerForm.get('email')?.touched) {
              <span class="error-message">{{ validationMessages.email.invalid }}</span>
            }
            @if (registerForm.get('email')?.hasError('minlength') && registerForm.get('email')?.touched) {
              <span class="error-message">{{ validationMessages.email.minLength }}</span>
            }
            @if (registerForm.get('email')?.hasError('maxlength') && registerForm.get('email')?.touched) {
              <span class="error-message">{{ validationMessages.email.maxLength }}</span>
            }
          </div>

          <!-- Password Field -->
          <div class="form-field">
            <label for="password" class="form-label">Mot de passe</label>
            <div class="input-wrapper">
              <input
                id="password"
                type="password"
                formControlName="password"
                class="form-input"
                placeholder="••••••••"
                [class.error]="registerForm.get('password')?.invalid && registerForm.get('password')?.touched"
              >
              <svg class="input-icon" 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>
            </div>
            @if (registerForm.get('password')?.hasError('required') && registerForm.get('password')?.touched) {
              <span class="error-message">{{ validationMessages.password.required }}</span>
            }
            @if (registerForm.get('password')?.hasError('minlength') && registerForm.get('password')?.touched) {
              <span class="error-message">{{ validationMessages.password.minLength }}</span>
            }
            @if (registerForm.get('password')?.hasError('maxlength') && registerForm.get('password')?.touched) {
              <span class="error-message">{{ validationMessages.password.maxLength }}</span>
            }
            <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
                id="confirmPassword"
                type="password"
                formControlName="confirmPassword"
                class="form-input"
                placeholder="••••••••"
                [class.error]="registerForm.get('confirmPassword')?.invalid && registerForm.get('confirmPassword')?.touched"
              >
              <svg class="input-icon" 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>
            </div>
            @if (registerForm.get('confirmPassword')?.hasError('required') && registerForm.get('confirmPassword')?.touched) {
              <span class="error-message">{{ validationMessages.password.required }}</span>
            }
            @if (registerForm.get('confirmPassword')?.hasError('minlength') && registerForm.get('confirmPassword')?.touched) {
              <span class="error-message">{{ validationMessages.password.minLength }}</span>
            }
          </div>

          <!-- Submit Button -->
          <button
            type="submit"
            [disabled]="registerForm.invalid"
            class="auth-btn"
          >
            <span>Créer mon compte</span>
          </button>

        </form>
      }

    </div>

    <!-- Footer -->
    <div class="auth-footer">
      <p>Vous avez déjà un compte ? <a routerLink="/login" class="login-link">Se connecter</a></p>
    </div>
  </div>
</div>
