<ng-template #modal>
  <div class="modal-header">
    <h4 class="modal-title">{{ modalTitle }}</h4>
    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
      <my-global-icon iconName="cross"></my-global-icon>
    </button>
  </div>

  <div class="modal-body">
    <form novalidate [formGroup]="form" (ngSubmit)="report()">

      <div class="row">
        <div class="col-5">

          <label i18n for="reportPredefinedReasons">What is the issue?</label>

          <div class="ms-2 mt-2 d-flex flex-column">
            <ng-container formGroupName="predefinedReasons">

              @for (reason of predefinedReasons; track reason) {
                <div class="form-group">
                  <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
                    @if (reason.help) {
                      <ng-template ptTemplate="help">
                        <div [innerHTML]="reason.help"></div>
                      </ng-template>
                    }
                    @if (reason.description) {
                      <ng-container ngProjectAs="description">
                        <div [innerHTML]="reason.description"></div>
                      </ng-container>
                    }
                  </my-peertube-checkbox>
                </div>
              }

            </ng-container>
          </div>
        </div>

        <div class="col-7">
          <div class="information">
            <ng-container i18n>Your report will be sent to moderators of {{ currentHost }}.</ng-container>

            @if (isRemote()) {
              <ng-container i18n>It will be forwarded to the comment origin ({{ originHost }}) too.</ng-container>
            }
          </div>

          <div class="form-group">
            <textarea
              i18n-placeholder placeholder="Please describe the issue..." formControlName="reason" ngbAutofocus
              [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
            ></textarea>

            @if (formErrors.reason) {
              <div class="form-error" role="alert">{{ formErrors.reason }}</div>
            }
          </div>
        </div>
      </div>

      <div class="form-group inputs">
        <input
          type="button" role="button" i18n-value value="Cancel" class="peertube-button secondary-button"
          (click)="hide()" (key.enter)="hide()"
          >

        <input type="submit" i18n-value value="Submit" class="peertube-button primary-button" [disabled]="!form.valid">
      </div>

    </form>
  </div>
</ng-template>
