<form [formGroup]="formGroup" class="p-l-24 p-r-24 p-t-16">
  <div class="form-group">
    <label title="{{ 'Upload a binary' | translate }}" class="c8y-radio radio-inline">
      <input
        #radio
        formControlName="uploadChoice"
        type="radio"
        value="uploadBinary"
        name="uploadChoice"
        (change)="onChange($event.target.value)"
      />
      <span></span>
      <span>{{ 'Upload a binary' | translate }}</span>
    </label>
    <label title="{{ 'Provide a file path' | translate }}" class="c8y-radio radio-inline m-l-8">
      <input
        #radio
        formControlName="uploadChoice"
        type="radio"
        value="uploadUrl"
        name="uploadChoice"
        (change)="onChange($event.target.value)"
      />
      <span></span>
      <span>
        {{ 'Provide a file path' | translate }}
      </span>
    </label>
  </div>

  <ng-container [ngSwitch]="uploadChoice">
    <div *ngSwitchCase="'uploadBinary'">
      <c8y-form-group class="m-0">
        <c8y-drop-area
          formControlName="droppedFile"
          class="drop-area-sm"
          [title]="'Drop file or click to browse' | translate"
          [maxAllowedFiles]="1"
          [accept]="'md'"
        ></c8y-drop-area>
      </c8y-form-group>
    </div>
    <div *ngSwitchCase="'uploadUrl'">
      <c8y-form-group class="m-0">
        <div class="m-b-4 p-b-8">
          <div class="input-group">
            <span class="input-group-addon">
              <i c8yIcon="globe"></i>
            </span>
            <input
              type="text"
              class="form-control"
              formControlName="contentUrl"
              placeholder="{{ 'e.g.' | translate }} http://example.com/binary.zip"
            />
          </div>
        </div>
      </c8y-form-group>
    </div>
  </ng-container>
</form>