<div class="col-md-9">
  <div class="box box-primary">
    <div class="box-header with-border">
      <div class="row">
        <div class="col-md-4">
          <input type="text" class="form-control" placeholder="Search By Contact, Guest and Group Names, ID, Folio"
            value= {{queryObj.searchText}} oninput= {{action 'onInput' value="target.value"}}
          />
        </div>
      </div>
    </div>
    <div class="box-body">
      <div class="row">
        <div class="col-md-4">
          {{#power-select placeholder="Hotel" searchField="name" allowClear=true selected=hotel
            options=hotels onchange=(action "setHotel") as |hotel| }}
            {{hotel.name}}
          {{/power-select}}
        </div>
        <div class="col-md-2">
          {{#power-select placeholder="Room type" searchField="name" allowClear=true selected=roomType
            options=mappedRoomTypes onchange=(action "setRoomType") as |roomType| }}
            {{roomType.name}}
          {{/power-select}}
        </div>
        <div class="col-md-2">
          {{#power-select placeholder="Room No" searchField="name" allowClear=true selected=room
            options=mappedRooms onchange=(action "setRoom") as |room| }}
            {{room.name}}
          {{/power-select}}
        </div>
        <div class="col-md-2">
          {{#power-select placeholder="Status" allowClear=true selected=status options=statuses
            onchange=(action "setStatus") as |name| }}
            {{name}}
          {{/power-select}}
        </div>
        <div class="col-md-2">
          <input type="checkbox" checked= {{queryObj.isAdvanced}} {{action "toggleAdvanced" on="change"}}
          /> Advanced?
        </div>
      </div>
    </div>
    <!-- /.box-body -->
  </div>
  <!-- /.box -->
</div>
{{!--col-md-9--}}
<div class="col-md-3 col-xs-3">
  <aside class="control-sidebar relative control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane active" id="control-sidebar-home-tab">
        {{!--<h3 class="control-sidebar-heading">Actions</h3>--}}
        <ul class="control-sidebar-menu">
          <li>
            <a href="#" {{action 'clearAll'}}>
              <i class="menu-icon fa fa-trash-o bg-red"></i>
              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Clear All</h4>

                <p>Reset form</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>

</div>
<!--col-md-3 col-xs-3-->
{{#if queryObj.isAdvanced}}
  <div class="col-md-9">
    {{admin-select-dates start=dateIn end=dateOut onSetDateIn=(action 'setDateIn') onSetDateOut=(action
    'setDateOut') isRoomingList=isRoomingList}}
  </div>
{{/if}}