<ng-template #confirmModal let-close="close" let-dismiss="dismiss">

  <div class="modal-header">
    <h4 class="modal-title">{{ title }}</h4>

    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="dismiss()">
      <my-global-icon iconName="cross"></my-global-icon>
    </button>
  </div>

  <div class="modal-body" >
    <div [innerHtml]="message"></div>

    @if (moreInfo) {
      <details class="mt-3">
        <summary i18n>{{ moreInfo.title }}</summary>

        {{ moreInfo.content }}
      </details>
    }

    @if (inputLabel) {
      <div class="form-group mt-3">
        <label for="confirmInput">{{ inputLabel }}</label>

        @if (isPasswordInput) {
          <my-input-text
            [autofocus]="true" autocomplete="on"
            inputId="confirmInput" [(ngModel)]="inputValue" (keyup.enter)="confirm()"
          ></my-input-text>
        } @else {
          <input
            type="text" myAutofocus id="confirmInput" name="confirmInput"
            [(ngModel)]="inputValue" (keyup.enter)="confirm()"
            />
        }
      </div>
    }

    @if (hasError()) {
      <div class="text-danger">{{ errorMessage }}</div>
    }
  </div>

  <div class="modal-footer inputs">
    <input
      type="button" role="button" [value]="cancelButtonText" class="peertube-button secondary-button"
      (click)="dismiss()" (key.enter)="dismiss()"
      >

    <input
      ngbAutofocus
      type="submit" [value]="confirmButtonText" class="peertube-button primary-button" [disabled]="isConfirmationDisabled()"
      (click)="close()" (key.enter)="confirm()"
      >
  </div>
</ng-template>
