<div class="c-card">
  <form>
    <div class="c-card__content">
      <div class="t-title--large"> Address </div>

      <div class="row">
        <div class="col-xs-6">
          <div class="form-group">
            <label> House # </label>
            <input class="form-control" type="text" placeholder="From">
          </div>
        </div>

        <div class="col-xs-6">
          <div class="form-group">
            <label> &nbsp; </label>
            <input class="form-control" type="text" placeholder="To">
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-4">
          <div class="form-group">
            <label> Street Name </label>
            <select class="form-control">
              <option>Begins with</option>
              <option>Contains</option>
              <option>Ends with</option>
            </select>
          </div>
        </div>
        <div class="col-xs-8">
          <div class="form-group">
            <label> &nbsp; </label>
            <input class="form-control" type="text" placeholder="Ex. Main">
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-3">
          <div class="form-group">
            <label> Street Suffix </label>
            <select class="flexmls-ui" multiple>
              <option value="Avenue">Avenue</option>
              <option value="Avenue Circle">Avenue Circle</option>
              <option value="Avenue Court">Avenue Court</option>
              <option value="Boulevard">Boulevard</option>
              <option value="Broadway">Broadway</option>
              <option value="Circle">Circle</option>
              <option value="Court">Court</option>
              <option value="Creek">Creek</option>
              <option value="Crossing">Crossing</option>
              <option value="Drive">Drive</option>
              <option value="Lane">Lane</option>
              <option value="Loop">Loop</option>
              <option value="Parkway">Parkway</option>
              <option value="Passage">Passage</option>
              <option value="Place">Place</option>
              <option value="Point">Point</option>
              <option value="Ridge">Ridge</option>
              <option value="Road">Road</option>
              <option value="Square">Square</option>
              <option value="St. Cir.">St. Cir.</option>
              <option value="Street">Street</option>
              <option value="Street Court">Street Court</option>
              <option value="Terrace">Terrace</option>
              <option value="Trail">Trail</option>
              <option value="View">View</option>
              <option value="Vista">Vista</option>
              <option value="Way">Way</option>
            </select>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            <label> St Direction Suffix </label>
            <select class="flexmls-ui" multiple>
              <option value="e">E</option>
              <option value="n">N</option>
              <option value="ne">NE</option>
              <option value="nw">NW</option>
              <option value="s">S</option>
              <option value="se">SE</option>
              <option value="sw">SW</option>
              <option value="w">W</option>
            </select>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            <label> Unit # </label>
            <input class="form-control" type="text" placeholder="Ex. 305">
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            <label> County </label>
            <select class="flexmls-ui" multiple>
              <option value="Apache">Apache</option>
              <option value="Cochise">Cochise</option>
              <option value="Coconino">Coconino</option>
              <option value="Gila">Gila</option>
              <option value="Graham">Graham</option>
              <option value="Greenlee">Greenlee</option>
              <option value="La Paz">La Paz</option>
              <option value="Maricopa">Maricopa</option>
              <option value="Mohave">Mohave</option>
              <option value="Navajo">Navajo</option>
              <option value="Other">Other</option>
              <option value="Pima">Pima</option>
              <option value="Pinal">Pinal</option>
              <option value="Santa Cruz">Santa Cruz</option>
              <option value="Yavapai">Yavapai</option>
              <option value="Yuma">Yuma</option>
            </select>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
            <label> City </label>
            <select class="flexmls-ui" multiple>
              <option value="Fargo">Fargo</option>
              <option value="Moorhead">Moorhead</option>
              <option value="West Fargo">West Fargo</option>
            </select>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            <label> State </label>
            <select class="flexmls-ui" multiple>
              <option value="MN">MN</option>
              <option value="MT">MT</option>
              <option value="ND">ND</option>
              <option value="SD">SD</option>
            </select>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            <label> Zip Code </label>
            <input class="form-control" type="text" placeholder="Ex. 59901">
          </div>
        </div>
      </div>


      <hr class="o-form-divider">


      <div class="t-title--large"> Filters </div>

      <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
            <label> Status </label>
            <select class="flexmls-ui" multiple>
              <option value="A">Active</option>
              <option value="L">Cancelled</option>
              <option value="C">Closed</option>
              <option value="E">Expired</option>
              <option value="P">Pending</option>
              <option value="W">Withdrawn</option>
            </select>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="form-group">
            <label> Property Type </label>
            <select class="flexmls-ui" multiple>
              <option value="A" selected="">Residential</option>
              <option value="I" selected="">Multi-Family</option>
              <option value="J" selected="">Vacant Land/Lots</option>
              <option value="K" selected="">Commercial</option>
            </select>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-6">
          <div class="form-group">
            <label> Status Change Date </label>
            <input class="flexmls-ui-datepicker form-control" type="text" placeholder="From">
          </div>
        </div>

        <div class="col-xs-6">
          <div class="form-group">
            <label> &nbsp; </label>
            <input class="flexmls-ui-datepicker form-control" type="text" placeholder="To">
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-sm-12">
          <div class="form-group">
            <label> Included Listings </label>
            <select class="form-control">
              <option>All listings</option>
              <option>My office's listings</option>
              <option>My listings</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="c-card__footer">
      <button class="btn btn-primary" type="submit"> Search </button>
    </div>
  </form>
</div>

<script>
  $(function () {
    $('select.flexmls-ui').flexSelect2();
    $('.flexmls-ui-datepicker').flatpickr({
      allowInput: true,
      dateFormat: 'm/d/y'
    });
  });
</script>