<div class="card dashboard-search">
  <div class="card-body">
    <h5 class="text-white mb-3">{{ 'dashboards.advanced-search' | translate}}</h5>
    <div class="form-container">
      <form>
        <div class="form-group">
          <label>{{ 'dashboards.toppings' | translate}}</label>
          <ng-select appearance="outline" [searchable]="false">
            <ng-option *ngFor="let item of selectToppings" [value]="item.value">{{item.label}}</ng-option>
          </ng-select>
        </div>
        <div class="form-group">
          <label>{{ 'dashboards.type' | translate }}</label>
          <ng-select appearance="outline" [searchable]="false">
            <ng-option *ngFor="let item of selectTypes" [value]="item.value">{{item.label}}</ng-option>
          </ng-select>
        </div>
        <div class="form-group">
          <label>{{ 'dashboards.keyword' | translate }}</label>
          <div class="input-group date">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group mb-5">
          <div class="custom-control custom-checkbox mb-4">
            <input type="checkbox" class="custom-control-input" id="customCheckThis">
            <label class="custom-control-label" for="customCheckThis">Check this!</label>
          </div>
        </div>
        <div class="form-group text-center">
          <button type="submit" class="btn btn-primary btn-lg mt-3">{{ 'dashboards.search' | translate}}</button>
        </div>
      </form>

    </div>
  </div>
</div>
