@if (error) {
  <my-alert type="danger">{{ error }}</my-alert>
}

<div class="pt-two-cols">

  <div class="title-col">
    <h2 i18n>NEW SYNCHRONIZATION</h2>
  </div>

  <div class="content-col">
    <form (ngSubmit)="formValidated()" [formGroup]="form">

      <div class="form-group">
        <label i18n for="externalChannelUrl">Remote channel URL</label>

        <div class="input-group">
          <input
            type="text"
            id="externalChannelUrl"
            i18n-placeholder
            placeholder="Example: https://youtube.com/channel/UC_fancy_channel"
            formControlName="externalChannelUrl"
            [ngClass]="{ 'input-error': formErrors['externalChannelUrl'] }"
            class="form-control"
            >
        </div>

        @if (formErrors['externalChannelUrl']) {
          <div class="form-error" role="alert">{{ formErrors['externalChannelUrl'] }}</div>
        }
      </div>

      <div class="form-group">
        <label i18n for="videoChannel">Video channel</label>
        <my-select-channel inputId="videoChannel" [items]="userVideoChannels" formControlName="videoChannel"></my-select-channel>

        @if (formErrors['videoChannel']) {
          <div class="form-error" role="alert">{{ formErrors['videoChannel'] }}</div>
        }
      </div>

      <div class="form-group" role="radiogroup">
        <label for="existingVideoStrategy" i18n>Options for existing videos on remote channel:</label>

        <div class="peertube-radio-container">
          <input type="radio" name="existingVideoStrategy" id="import" value="import" formControlName="existingVideoStrategy" />
          <label for="import" i18n>Import all and watch for new publications</label>
        </div>

        <div class="peertube-radio-container">
          <input type="radio" name="existingVideoStrategy" id="doNothing" value="nothing" formControlName="existingVideoStrategy" />
          <label for="doNothing" i18n>Only watch for new publications</label>
        </div>
      </div>

      <input type="submit" class="peertube-button primary-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
    </form>
  </div>
</div>