<div class="modal fade" id="resetPasswordModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">
          {{ 'resetPassword' | translate }}
        </h5>
        <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <!-- Show warning if no user is selected -->
        <div *ngIf="!userId" class="alert alert-warning mb-3">
          <i class="fas fa-exclamation-triangle me-2"></i>
          {{ 'noUserSelected' | translate }}
        </div>

        <!-- User ID display -->
        <div class="mb-3" *ngIf="userId">
          <label class="form-label fw-bold">
            {{ 'userID' | translate }} <span class="mandatory">*</span>
          </label>
          <div class="input-group">
            <input 
              type="text" 
              class="form-control bg-light" 
              [value]="userId" 
              readonly 
              placeholder="{{ 'userID' | translate }}"
            />
            <span class="input-group-text">
              <i class="fas fa-user"></i>
            </span>
          </div>
          
        </div>

        <form [formGroup]="resetPasswordForm" *ngIf="userId">
          <!-- New Password Field -->
          <div class="mb-3">
            <label class="form-label fw-bold">
              {{ 'enterNewPassword' | translate }} <span class="mandatory">*</span>
            </label>
            <div class="password-wrapper input-group">
              <input 
                class="form-control" 
                formControlName="newPassword"  
                placeholder="{{'enterNewPassword' | translate}}" 
                [type]="newPasswordType" 
                autocomplete="new-password" 
                appNoWhitespaces 
                [attr.disabled]="isSubmitting ? true : null"
              />
              <button 
                class="btn btn-outline-secondary" 
                type="button" 
                (click)="togglePasswordType()"
                [attr.disabled]="isSubmitting ? true : null"
              >
                <i class="fas" [class.fa-eye]="newPasswordType === 'text'" 
                   [class.fa-eye-slash]="newPasswordType === 'password'"></i>
              </button>
            </div>
            
            <!-- Validation messages -->
            <div class="text-danger mt-1" *ngIf="resetPasswordForm.get('newPassword')?.touched">
              <div *ngIf="resetPasswordForm.get('newPassword')?.hasError('required')">
                {{ 'fieldRequired' | translate }}
              </div>
             <div *ngIf="resetPasswordForm.get('newPassword')?.hasError('maxlength')">
                {{ 'passwordMaxLength' | translate }}
              </div>
              <div *ngIf="resetPasswordForm.get('newPassword')?.hasError('pattern')">
                {{ 'passwordPattern' | translate }}
              </div>
            </div>
            
            <!-- Password requirements hint -->
            <div class="form-text text-muted">
            </div>
          </div>

          <!-- Confirm Password Field -->
          <div class="mb-3">
            <label class="form-label fw-bold">
              {{ 'confirmPassword' | translate }} <span class="mandatory">*</span>
            </label>
            <div class="password-wrapper input-group">
              <input 
                class="form-control" 
                formControlName="confirmPassword" 
                placeholder="{{'confirmPassword' | translate}}" 
                [type]="confirmPasswordType" 
                autocomplete="new-password" 
                appNoWhitespaces 
                [attr.disabled]="isSubmitting ? true : null"
              />
              <button 
                class="btn btn-outline-secondary" 
                type="button" 
                (click)="toggleConfirmPasswordType()"
                [attr.disabled]="isSubmitting ? true : null"
              >
                <i class="fas" [class.fa-eye]="confirmPasswordType === 'text'" 
                   [class.fa-eye-slash]="confirmPasswordType === 'password'"></i>
              </button>
            </div>
            
            <!-- Validation messages -->
            <div class="text-danger mt-1" *ngIf="resetPasswordForm.get('confirmPassword')?.touched">
              <div *ngIf="resetPasswordForm.get('confirmPassword')?.hasError('required')">
                {{ 'fieldRequired' | translate }}
              </div>
              <div *ngIf="resetPasswordForm.get('confirmPassword')?.hasError('passwordMismatch')">
                {{ 'passwordsDoNotMatch' | translate }}
              </div>
            </div>
          </div>
        </form>
      </div>

      <div class="modal-footer d-flex justify-content-end gap-2">
        <button 
          type="button" 
          class="btn btn-outline-secondary btn-sm px-4" 
          (click)="closeModal()"
          [attr.disabled]="isSubmitting ? true : null"
        >
          {{ 'cancel' | translate }}
        </button>
    
        <button 
          type="button" 
          class="btn btn-primary btn-sm px-4" 
          [disabled]="resetPasswordForm.invalid || !userId || isSubmitting" 
          (click)="submit()"
        >
          <span *ngIf="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
          {{ isSubmitting ? ('saving' | translate) : ('save' | translate) }}
        </button>
      </div>

    </div>
  </div>
</div>