<h2 class="form-title">
  <my-global-icon iconName="live"></my-global-icon>

  <ng-container i18n>Live settings</ng-container>
</h2>

@if (!isLive()) {
  <my-alert type="danger" i18n>{{ getVideoName() }} is not a live.</my-alert>
} @else if (hasEnded()) {
  <my-alert type="primary" i18n>Your live has ended.</my-alert>
} @else {
  <form [formGroup]="form" id="video-manage-form">
    <my-alert class="d-block mb-4" type="primary">
      @if (isStreaming()) {
        <ng-container i18n>Live configuration is unavailable because you are streaming in this live.</ng-container>
      } @else {
        <my-live-documentation-link></my-live-documentation-link>

        @if (getMaxLiveDuration() >= 0) {
          <div class="mt-3" i18n>
          Max live duration configured on {{ getInstanceName() }} is {{ getMaxLiveDuration() | myTimeDurationFormatter }}. If your live reaches this limit, it
          will be automatically terminated.
        </div>
        }
      }
    </my-alert>

    <div class="form-columns reverse" [ngClass]="{ disabled: isStreaming() }">
      <div>
        @if (getLive().rtmpUrl) {
          <div class="form-group">
            <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
            <my-input-text
              inputId="liveVideoRTMPUrl"
              [value]="getLive().rtmpUrl"
              [withToggle]="false"
              [withCopy]="true"
              [show]="true"
              [readonly]="true"
            ></my-input-text>
          </div>
        }

        @if (getLive().rtmpsUrl) {
          <div class="form-group">
            <label for="liveVideoRTMPSUrl" i18n>Live RTMPS Url</label>
            <my-input-text
              inputId="liveVideoRTMPSUrl"
              [value]="getLive().rtmpsUrl"
              [withToggle]="false"
              [withCopy]="true"
              [show]="true"
              [readonly]="true"
            ></my-input-text>
          </div>
        }

        <div class="form-group">
          <label for="liveVideoStreamKey" i18n>Live stream key</label>
          <my-input-text inputId="liveVideoStreamKey" [value]="getLive().streamKey" [withCopy]="true" [readonly]="true"></my-input-text>

          <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
        </div>

        <my-live-stream-information [video]="videoEdit.getVideoAttributes()"></my-live-stream-information>
      </div>

      <div>
        <div class="form-group">
          <div class="peertube-radio-container">
            <input type="radio" formControlName="permanentLive" id="permanentLiveFalse" [value]="false">
            <label i18n for="permanentLiveFalse" class="radio">This is a normal live</label>

            <span class="form-group-description" i18n>
              You can stream only once in a normal live. If you enable replay, it will be saved under the same URL as your live
            </span>
          </div>

          <div class="peertube-radio-container">
            <input type="radio" formControlName="permanentLive" id="permanentLiveTrue" [value]="true">
            <label i18n for="permanentLiveTrue" class="radio">This is a permanent/recurring live</label>

            <span class="form-group-description" i18n>
              You can stream multiple times in a permanent/recurring live. If you enable replays, they will be saved as separate videos
            </span>
          </div>
        </div>

        @if (isSaveReplayAllowed()) {
          <div class="form-group">
            <my-peertube-checkbox inputName="liveVideoSaveReplay" formControlName="saveReplay">
              <ng-template ptTemplate="label">
                <ng-container i18n>Automatically publish a replay when your live ends</ng-container>
              </ng-template>
              <ng-container ngProjectAs="description">
                <span i18n>⚠️ If you enable this option, your live will be terminated if you exceed your video quota</span>
              </ng-container>
            </my-peertube-checkbox>
          </div>
        }

        @if (isSaveReplayEnabled()) {
          <div class="form-group ms-4">
            <label i18n for="replayPrivacy">Privacy of the new replay</label>
            <my-select-options inputId="replayPrivacy" [items]="replayPrivacies" formControlName="replayPrivacy"></my-select-options>
          </div>
        }

        @if (isLatencyModeEnabled()) {
          <div class="form-group">
            <label i18n for="latencyMode">Latency mode</label>
            <my-select-options inputId="latencyMode" [items]="latencyModes" formControlName="latencyMode" clearable="true"></my-select-options>
            @if (formErrors.latencyMode) {
              <div class="form-error" role="alert">
                {{ formErrors.latencyMode }}
              </div>
            }
          </div>
        }

        <div class="form-group" formArrayName="schedules">
          <ng-container formGroupName="0">
            <div class="label-container">
              <label i18n for="startAt">Live scheduled date</label>

              @if (hasScheduledDate()) {
                <button i18n class="reset-button reset-button-small" (click)="resetSchedule()">
                Reset
              </button>
              }
            </div>

            <div class="form-group-description" i18n>
              This date is used for displaying the live in your channel when it's not currently streaming. Scheduling a live does not prevent you from starting
              the live at a different time.
            </div>

            <p-datepicker
              inputId="startAt"
              formControlName="startAt"
              [dateFormat]="calendarDateFormat"
              [firstDayOfWeek]="0"
              [showTime]="true"
              [hideOnDateTimeSelect]="true"
              [monthNavigator]="true"
              [yearNavigator]="true"
              [yearRange]="myYearRange"
              baseZIndex="20000"
              >
            </p-datepicker>
          </ng-container>
        </div>
      </div>
    </div>
  </form>
}
