<ng-container *transloco="let t; prefix: 'shared.changePassword'">
<div class="change-password-container">
  <div class="change-password-card-wrapper">
    <div class="change-password-card-border">
      <div class="change-password-card">
        <div class="change-password-header">
          <div class="logo-wrapper">
            <div class="icon-circle">
              <i class="pi pi-key"></i>
            </div>
          </div>
          <h1 class="change-password-title">{{ t('title') }}</h1>
          <p class="change-password-subtitle">{{ t('subtitle') }}</p>
        </div>

        <form class="change-password-form" #changePasswordForm="ngForm" (ngSubmit)="changePassword()">
          <div class="form-field">
            <label for="currentPassword" class="form-label">
              <i class="pi pi-lock"></i>
              <span>{{ t('currentPasswordLabel') }}</span>
            </label>
            <p-password
              id="currentPassword"
              name="currentPassword"
              required
              [(ngModel)]="currentPassword"
              [feedback]="false"
              [placeholder]="t('currentPasswordPlaceholder')"
              [toggleMask]="true"
              [fluid]="true"
              autocomplete="current-password"
            ></p-password>
          </div>

          <div class="form-field">
            <label for="newPassword" class="form-label">
              <i class="pi pi-lock-open"></i>
              <span>{{ t('newPasswordLabel') }}</span>
            </label>
            <p-password
              id="newPassword"
              name="newPassword"
              required
              [(ngModel)]="newPassword"
              [feedback]="false"
              [placeholder]="t('newPasswordPlaceholder')"
              [toggleMask]="true"
              [fluid]="true"
              autocomplete="new-password"
            ></p-password>
          </div>

          <div class="form-field">
            <label for="confirmNewPassword" class="form-label">
              <i class="pi pi-check-circle"></i>
              <span>{{ t('confirmPasswordLabel') }}</span>
            </label>
            <p-password
              id="confirmNewPassword"
              name="confirmNewPassword"
              required
              [(ngModel)]="confirmNewPassword"
              [feedback]="false"
              [placeholder]="t('confirmPasswordPlaceholder')"
              [toggleMask]="true"
              [fluid]="true"
              autocomplete="new-password"
            ></p-password>
            @if (!passwordsMatch && confirmNewPassword) {
              <small class="field-error">
                <i class="pi pi-exclamation-circle"></i>
                {{ t('validation.passwordsMismatch') }}
              </small>
            }
          </div>

          <p-button
            fluid
            type="submit"
            [label]="t('updateBtn')"
            icon="pi pi-check"
            [disabled]="!changePasswordForm.valid || !passwordsMatch"
            class="change-password-button"
          />

          @if (errorMessage) {
            <div class="message-container error-message">
              <p-message severity="error">{{ errorMessage }}</p-message>
            </div>
          }

          @if (successMessage) {
            <div class="message-container success-message">
              <p-message severity="success">{{ successMessage }}</p-message>
            </div>
          }
        </form>
      </div>
    </div>
  </div>
</div>
</ng-container>
