<ng-template #modal>
  <div class="modal-header">
    <h4 i18n class="modal-title">Edit caption "{{ videoCaption.language.label }}"</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">

    <div class="row">

      <my-embed *ngIf="videoEdit.isPublishedVOD()" #embed class="col-md-12 col-xl-6 mb-3" [video]="videoEdit.getVideoAttributes()" enableAPI="true"></my-embed>

      <div [ngClass]="videoEdit.isPublishedVOD() ? 'col-xl-6 col-md-12' : ''">

        <div class="d-flex justify-content-between align-items-center mb-3 ms-2">
          <my-peertube-checkbox
            inputName="raw-edition"
            [(ngModel)]="rawEdit" (ngModelChange)="onRawEditSwitch()"
            i18n-labelText labelText="Edit raw"
          ></my-peertube-checkbox>

          <my-button *ngIf="!rawEdit && !segmentToUpdate" i18n-label label="Add a new segment" (click)="addSegmentToEdit()">
          </my-button>
        </div>

        <div [hidden]="!rawEdit" [formGroup]="form">
          <textarea
            id="captionFileContent"
            formControlName="captionFileContent"
            i18n-label aria-label="Caption raw content"
            class="form-control caption-raw-textarea fs-7"
            [ngClass]="{ 'input-error': formErrors['captionFileContent'] }"
            #textarea
          >
          </textarea>

          <div *ngIf="formErrors.captionFileContent" class="form-error" role="alert">
            {{ formErrors.captionFileContent }}
          </div>
        </div>

        <div class="text-start segments pe-2 ps-2" [hidden]="rawEdit">
          @for (segment of segments; track segment.id) {
            <div class="pt-1 pb-1 mb-3">
              @if (segmentToUpdate === segment) {
                <div role="form">
                  <div class="d-flex flex-wrap align-items-center">
                    <div>
                      <label class="visually-hidden" i18n for="segmentStart">Segment start timestamp</label>

                      <my-timestamp-input
                        class="me-1" inputName="segmentStart" enableBorder="true"
                        [maxTimestamp]="(videoEdit.getVideoAttributes().duration || 0) * 1000" mask="99:99:99.999"
                        [(ngModel)]="segment.startMs" [parser]="timestampParser" [formatter]="timestampFormatter"
                      ></my-timestamp-input>

                      <my-button
                        *ngIf="videoEdit.isPublishedVOD()" icon="clock-arrow-down"
                        i18n-title title="Use video current time as start time" (click)="videoTimeForSegmentStart(segment)"
                      >
                      </my-button>
                    </div>

                    <my-global-icon class="d-inline-block ms-2 me-2" iconName="move-right"></my-global-icon>

                    <div>
                      <label class="visually-hidden" i18n for="segmentEnd">Segment end timestamp</label>

                      <my-timestamp-input
                        class="me-1" inputName="segmentEnd" enableBorder="true"
                        [maxTimestamp]="(videoEdit.getVideoAttributes().duration || 0) * 1000" mask="99:99:99.999"
                        [(ngModel)]="segment.endMs" [parser]="timestampParser" [formatter]="timestampFormatter"
                      ></my-timestamp-input>

                      <my-button
                        *ngIf="videoEdit.isPublishedVOD()" icon="clock-arrow-down"
                        i18n-title title="Use video current time as end time" (click)="videoTimeForSegmentEnd(segment)"
                      >
                      </my-button>
                    </div>
                  </div>

                  <div class="d-flex mt-2">
                    <div class="form-group w-100">
                      <label class="visually-hidden" i18n for="segment-edit">Segment end timestamp</label>

                      <textarea  id="segment-edit" name="segment-edit" class="form-control fs-7" [(ngModel)]="segment.text"></textarea>

                      <div *ngIf="segmentEditError" class="form-error" role="alert">{{ segmentEditError }}</div>
                    </div>

                    <div class="d-flex flex-column ms-3">
                      <my-button i18n-title title="Save" icon="tick" (click)="onEditSaved(segment)"></my-button>
                      <my-button class="mt-3" i18n-title title="Revert" icon="undo" (click)="onEditCanceled(segment)"></my-button>
                    </div>
                  </div>
                </div>
              } @else {
                <div class="d-flex">
                  <div
                    class="flex-grow-1 segment-text ps-1 pe-1" role="button" tabindex="0" i18n-title title="Jump to this segment"
                    (keyup.enter)="onSegmentClick($event, segment)" (click)="onSegmentClick($event, segment)"
                    [ngClass]="{ active: segment === activeSegment }"
                  >
                    <strong class="segment-start me-2 d-block">{{ segment.startFormatted }} -> {{ segment.endFormatted }}</strong>
                    <span class="segment-text fs-7">{{ segment.text }}</span>
                  </div>

                  <div class="d-flex flex-column ms-3" [ngClass]="{ 'opacity-0': !!segmentToUpdate }">
                      @defer (on viewport) {
                        <my-edit-button i18n-title title="Edit this segment" (click)="updateSegment(segment)"></my-edit-button>
                        <my-delete-button class="mt-1" i18n-title title="Delete this segment" (click)="deleteSegment(segment)"></my-delete-button>
                      } @placeholder {
                        <div style="height: 100%; width: 40px"></div>
                      }
                    </div>
                </div>
              }
            </div>
          }
        </div>
      </div>
    </div>
  </div>

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

    <input
      type="button" i18n-value value="Edit this caption" class="peertube-button primary-button"
      [disabled]="rawEdit && !form.valid" (click)="updateCaption()"
    >
  </div>
</ng-template>
