<div class="oh-dropdown ms-0" x-data="{open: false}">
    <button
      class="oh-btn oh-btn--small ml-2"
      @click="open = !open"
    >
      <ion-icon name="filter" class="me-1"></ion-icon>Filter
    </button>
    <div
      class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
      x-show="open"
      @click.outside="open = false"
    >
      <div class="oh-dropdown__filter-body">
        <div class="oh-accordion">
          <div class="oh-accordion-header">Employee</div>
          <div class="oh-accordion-body">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="oh-input-group">
                  <label class="oh-label"
                    >First Name</label
                  >
                  <input
                    type="text"
                    class="oh-input oh-input--filter w-100"
                  />
                </div>
                <div class="oh-input-group">
                  <label class="oh-label"
                    >First Name</label
                  >
                  <select
                    class="oh-select oh-select--sm oh-select-no-search w-100"
                  >
                    <option selected>Option #1</option>
                    <option>Option #2</option>
                  </select>
                </div>
              </div>
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="oh-input-group">
                  <label class="oh-label"
                    >Last Name</label
                  >
                  <input
                    type="text"
                    class="oh-input oh-input--filter w-100"
                  />
                </div>
                <div class="oh-input-group">
                  <label class="oh-label"
                    >Last Name</label
                  >
                  <select
                    class="oh-select oh-select--sm oh-select-no-search w-100"
                  >
                    <option selected>Option #1</option>
                    <option>Option #2</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="oh-accordion">
          <div class="oh-accordion-header">Document</div>
          <div class="oh-accordion-body">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="oh-input-group">
                  <label class="oh-label"
                    >First Name</label
                  >
                  <input
                    type="text"
                    class="oh-input oh-input--filter w-100"
                  />
                </div>
                <div class="oh-input-group">
                  <label class="oh-label"
                    >First Name</label
                  >
                  <select
                    class="oh-select oh-select--sm oh-select-no-search w-100"
                  >
                    <option selected>Option #1</option>
                    <option>Option #2</option>
                  </select>
                </div>
              </div>
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="oh-input-group">
                  <label class="oh-label"
                    >Last Name</label
                  >
                  <input
                    type="text"
                    class="oh-input oh-input--filter w-100"
                  />
                </div>
                <div class="oh-input-group">
                  <label class="oh-label"
                    >Last Name</label
                  >
                  <select
                    class="oh-select oh-select--sm oh-select-no-search w-100"
                  >
                    <option selected>Option #1</option>
                    <option>Option #2</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="oh-accordion">
          <div class="oh-accordion-header">Advanced</div>
          <div class="oh-accordion-body">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="oh-input-group">
                  <label class="oh-label"
                    >First Name</label
                  >
                  <input
                    type="text"
                    class="oh-input oh-input--filter w-100"
                  />
                </div>
                <div class="oh-input-group">
                  <label class="oh-label"
                    >First Name</label
                  >
                  <select
                    class="oh-select oh-select--sm oh-select-no-search w-100"
                  >
                    <option selected>Option #1</option>
                    <option>Option #2</option>
                  </select>
                </div>
              </div>
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="oh-input-group">
                  <label class="oh-label"
                    >Last Name</label
                  >
                  <input
                    type="text"
                    class="oh-input oh-input--filter w-100"
                  />
                </div>
                <div class="oh-input-group">
                  <label class="oh-label"
                    >Last Name</label
                  >
                  <select
                    class="oh-select oh-select--sm oh-select-no-search w-100"
                  >
                    <option selected>Option #1</option>
                    <option>Option #2</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="oh-dropdown__filter-footer">
        <button
          class="oh-btn oh-btn--secondary oh-btn--small w-100"
        >
          Filter
        </button>
      </div>
    </div>
  </div>
