<h2>
  <my-global-icon iconName="cog"></my-global-icon>

  <ng-container i18n>Customization</ng-container>
</h2>

<div [formGroup]="form">
  <div class="form-columns">
    <div>
      <div *ngIf="videoEdit.getVideoSource()" class="form-group">
        <label i18n for="filename">Filename</label>

        <div class="form-group-description" i18n>
          Name of the uploaded file.
        </div>

        <input type="text" [disabled]="true" id="filename" class="form-control" [value]="videoEdit.getVideoSource().filename" />
      </div>

      <div class="form-group originally-published-at">
        <div class="label-container">
          <label i18n for="originallyPublishedAt">Original publication date</label>

          <button i18n class="reset-button reset-button-small" (click)="resetField('originallyPublishedAt')" *ngIf="hasPublicationDate()">
            Reset
          </button>
        </div>

        <div class="form-group-description" i18n>
          This is the date when the content was originally published (e.g. the release date for a film)
        </div>

        <p-datepicker
          inputId="originallyPublishedAt" formControlName="originallyPublishedAt" [dateFormat]="calendarDateFormat" [firstDayOfWeek]="0"
          [showTime]="true" [hideOnDateTimeSelect]="true" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="myYearRange"
          baseZIndex="20000"
        >
        </p-datepicker>

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

      <my-peertube-checkbox
        inputName="downloadEnabled" formControlName="downloadEnabled"
        i18n-labelText labelText="Enable download"
      ></my-peertube-checkbox>
    </div>
  </div>
</div>
