<div class="card mb-4">
  <div class="card-body">
    <h6 class="mb-4">{{ 'forms.external-components' | translate }}</h6>

    <form [formGroup]="formExternalComponents" #form="ngForm" (ngSubmit)="onSubmit()" novalidate class="tooltip-label-right">
      <div class="form-group">
        <label>{{ 'forms.name' | translate }}</label>
        <input type="text" class="form-control" name="name" formControlName="name">
        <div *ngIf="formExternalComponents.get('name')?.errors?.required && form.submitted" class="invalid-tooltip">Name is required!</div>
        <div *ngIf="formExternalComponents.get('name')?.errors?.minlength && form.submitted" class="invalid-tooltip">Name must contain at least 2 characters!</div>
        <div *ngIf="formExternalComponents.get('name')?.errors?.pattern && form.submitted" class="invalid-tooltip">Name must only contain letters!</div>
      </div>
      <div class="form-group error-l-75">
        <label><span>{{ 'form-components.select' | translate }}</span></label>
        <ng-select appearance="outline" #agreeSelect labelForId="yesno" [searchable]="false" formControlName="ngSelect">
          <ng-option [value]="true">Yes</ng-option>
          <ng-option [value]="false">No</ng-option>
        </ng-select>
        <div *ngIf="formExternalComponents.get('ngSelect')?.errors?.required && form.submitted" class="invalid-tooltip">NgSelect is required!</div>
      </div>
      <div class="form-group error-l-75">
        <label>{{ 'form-components.date-picker' | translate }}</label>
        <input type="text" class="form-control" formControlName="basicDate"
        bsDatepicker [container]="'html'" [bsConfig]="{ adaptivePosition: true, dateInputFormat: 'DD-MM-YYYY' }">
        <div *ngIf="formExternalComponents.get('basicDate')?.errors?.required && form.submitted" class="invalid-tooltip">Date is required!</div>
      </div>
      <div class="form-group error-l-75">
        <label>{{ 'form-components.timepicker' | translate }}</label>
        <timepicker class="timepicker" [showMinutes]="true" [showSeconds]="false" [showMeridian]="false" formControlName="basicTime"></timepicker>
        <div *ngIf="formExternalComponents.get('basicTime')?.errors?.required && form.submitted" class="invalid-tooltip">Time is required!</div>
      </div>
      <div class="form-group error-l-75">
        <label>{{ 'form-components.switch' | translate }}</label>
        <div class="custom-control custom-switch">
          <input type="checkbox" class="custom-control-input" id="customSwitch1" formControlName="switch">
          <label class="custom-control-label" for="customSwitch1">Toggle</label>
        </div>
        <div *ngIf="formExternalComponents.get('switch')?.errors?.required && form.submitted" class="invalid-tooltip">Switch must be toggled!</div>
      </div>
      <button class="btn btn-primary" type="submit">{{ 'forms.submit' | translate }}</button>
    </form>

  </div>
</div>
