<div class="datetime-picker">
  @switch (dateType) {
    @case ('DateAndTime') {
      <div
        class="d-contents"
        [closeDatepicker]="datepicker"
      >
        <div class="form-group datepicker {{ size ? 'form-group-' + size : '' }}">
          <input
            class="form-control"
            data-cy="bootstrap-date-input"
            [placeholder]="placeholder || defaultPlaceholder | translate"
            bsDatepicker
            [outsideClick]="false"
            [bsConfig]="{
              customTodayClass: 'today',
              dateInputFormat: dateInputFormat,
              adaptivePosition: adaptivePosition
            }"
            [formControl]="dateControl"
            (blur)="onTouched()"
            [minDate]="minDate"
            [maxDate]="maxDate"
            (onShown)="datepickerShown($event)"
          />
        </div>
        <timepicker
          class="form-group {{ size ? 'form-group-' + size : '' }}"
          [(ngModel)]="time"
          (ngModelChange)="onTimeChange($event)"
          [showSeconds]="config.showSeconds"
          [showSpinners]="config.showSpinners"
          [showMeridian]="config.showMeridian"
          (wheel)="handleMouseWheel($event)"
        ></timepicker>
      </div>
    }

    @case ('Date') {
      <div
        class="d-contents"
        [closeDatepicker]="datepicker"
      >
        <div class="form-group datepicker {{ size ? 'form-group-' + size : '' }}">
          <input
            class="form-control"
            [placeholder]="placeholder || defaultPlaceholder | translate"
            bsDatepicker
            [outsideClick]="false"
            [bsConfig]="{
              customTodayClass: 'today',
              dateInputFormat: dateInputFormat,
              adaptivePosition: adaptivePosition
            }"
            [formControl]="dateControl"
            (blur)="onTouched()"
            [minDate]="minDate"
            [maxDate]="maxDate"
            (onShown)="datepickerShown($event)"
          />
        </div>
      </div>
    }

    @case ('DateRange') {
      <div class="d-contents">
        <div class="form-group datepicker {{ size ? 'form-group-' + size : '' }}">
          <input
            class="form-control"
            placeholder="{{ 'Select a date range' | translate }}"
            [formControl]="dateControl"
            [bsConfig]="{
              customTodayClass: 'today',
              adaptivePosition: true,
              rangeInputFormat: dateInputFormat
            }"
            bsDaterangepicker
          />
        </div>
      </div>
    }

    @case ('Time') {
      <div class="d-contents">
        <timepicker
          class="form-group {{ size ? 'form-group-' + size : '' }}"
          [(ngModel)]="time"
          (ngModelChange)="onTimeChange($event)"
          [showSeconds]="config.showSeconds"
          [showSpinners]="config.showSpinners"
          [showMeridian]="config.showMeridian"
          [minutesPlaceholder]="'MM`MINUTES`' | translate"
          [hoursPlaceholder]="'HH`HOURS`' | translate"
          [secondsPlaceholder]="'SS`SECONDS`' | translate"
          (wheel)="handleMouseWheel($event)"
        ></timepicker>
      </div>
    }

    @case ('SingleDateRequired') {
      <div class="d-contents">
        <div class="form-group {{ size ? 'form-group-' + size : '' }}">
          <c8y-date-picker (onDateSelected)="onDateSelected.emit($event)"></c8y-date-picker>
        </div>
      </div>
    }
  }
</div>