<ng-container *transloco="let t; prefix:'reset-password-modal'">
  <form [formGroup]="resetPasswordForm">
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">{{t('title', {username: member().username | sentenceCase})}}</h4>
      <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>
    </div>
    <div class="modal-body">
      @if (errorMessage !== '') {
        <div class="alert alert-info">
          <strong>{{t('error-label')}}</strong> {{errorMessage}}
        </div>
      }

      <div class="mb-3">
        <label for="password" class="form-label">{{t('new-password-label')}}</label>
        <input id="password" class="form-control" minlength="4" formControlName="password" type="password">
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="close()">{{t('cancel')}}</button>
      <button type="submit" class="btn btn-primary" [disabled]="resetPasswordForm.value.password.length === 0" (click)="save()">{{t('save')}}</button>
    </div>
  </form>
</ng-container>
