<div class="filters-panel">
  <div class="panel-inner">
    <h3 class="panel-title">Filter Friends</h3>

    <div class="filter-block">
      <label>Aged between</label>
      <div class="age-wrap">
        <div class="field">
          <div class="control">
            <input type="text" class="input is-rounded" value="1" />
          </div>
        </div>
        <div class="separator">And</div>
        <div class="field">
          <div class="control">
            <input type="text" class="input is-rounded" value="99" />
          </div>
        </div>
        <div class="separator">Years</div>
      </div>
    </div>

    <div class="filter-block">
      <div class="control is-combo">
        <div class="combo-label">Relation</div>
        <div class="combo-box">
          <div class="box-inner">
            <div class="combo-item">
              <i class="mdi mdi-account-search-outline"></i>
              <span class="selected-item">Relation type</span>
            </div>
          </div>
          <div class="box-chevron">
            <i data-feather="chevron-down"></i>
          </div>
          <div class="box-dropdown">
            <div class="dropdown-inner has-slimscroll">
              <ul>
                <li>
                  <span class="item-icon">
                    <i class="mdi mdi-account-multiple-outline"></i>
                  </span>
                  <span class="item-name">All</span>
                  <span class="checkmark">
                    <i data-feather="check"></i>
                  </span>
                </li>
                <li>
                  <span class="item-icon">
                    <i class="mdi mdi-heart-circle-outline"></i>
                  </span>
                  <span class="item-name">Family</span>
                  <span class="checkmark">
                    <i data-feather="check"></i>
                  </span>
                </li>
                <li>
                  <span class="item-icon">
                    <i class="mdi mdi-briefcase-outline"></i>
                  </span>
                  <span class="item-name">Work</span>
                  <span class="checkmark">
                    <i data-feather="check"></i>
                  </span>
                </li>
                <li>
                  <span class="item-icon">
                    <i class="mdi mdi-account-group-outline"></i>
                  </span>
                  <span class="item-name">Friends</span>
                  <span class="checkmark">
                    <i data-feather="check"></i>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="filter-block">
      <div class="control is-combo">
        <div class="combo-label">Hobbies</div>
        <div class="image-combo-box has-rounded-images is-scrollable">
          <div class="box-inner">
            <div class="combo-item">
              <img src="assets/img/icons/friendkit-placeholder.svg" alt="" />
              <span class="selected-item">Select a hobby</span>
            </div>
          </div>
          <div class="box-chevron">
            <i data-feather="chevron-down"></i>
          </div>
          <div class="box-dropdown">
            <div class="dropdown-inner has-slimscroll">
              <ul>
                <li>
                  <span class="item-icon">
                    <img
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                      alt=""
                    />
                  </span>
                  <span class="item-name">Fast Pizza</span>
                  <span class="checkmark">
                    <i data-feather="check"></i>
                  </span>
                </li>
                <li>
                  <span class="item-icon">
                    <img
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/vector/icons/logos/lonelydroid.svg"
                      alt=""
                    />
                  </span>
                  <span class="item-name">Lonely Droid</span>
                  <span class="checkmark">
                    <i data-feather="check"></i>
                  </span>
                </li>
                <li>
                  <span class="item-icon">
                    <img
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/vector/icons/logos/drop.svg"
                      alt=""
                    />
                  </span>
                  <span class="item-name">Drop Cosmetics</span>
                  <span class="checkmark">
                    <i data-feather="check"></i>
                  </span>
                </li>
                <li>
                  <span class="item-icon">
                    <img
                      src="assets/img/vector/icons/logos/metamovies.svg"
                      alt=""
                    />
                  </span>
                  <span
                    src="https://via.placeholder.com/150x150"
                    data-demo-class="item-name"
                    >Metamovies</span
                  >
                  <span class="checkmark">
                    <i data-feather="check"></i>
                  </span>
                </li>
                <li>
                  <span class="item-icon">
                    <img
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/vector/icons/logos/nuclearjs.svg"
                      alt=""
                    />
                  </span>
                  <span class="item-name">NuclearJs</span>
                  <span class="checkmark">
                    <i data-feather="check"></i>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
