<div *ngIf="error" class="alert alert-danger">{{ error }}</div>

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

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

  <div class="content-col">
    <form role="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>

        <div *ngIf="formErrors['externalChannelUrl']" class="form-error" role="alert">
          {{ formErrors['externalChannelUrl'] }}
        </div>
      </div>

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

        <div *ngIf="formErrors['videoChannel']" 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" required />
          <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" required />
          <label for="doNothing" i18n>Only watch for new publications</label>
        </div>
      </div>

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