index.html

---
layout: default
---

<div class='row mg-bottom-lg'>
  <div class="col-md-4">
    <p>Find resources near you for adults and juveniles on probation in Cook County</p>

    <div class='row'>
      <div class="col-md-8">
        <div class="form-group">
            Address
            <input class='form-control' id='search-address' placeholder='Enter an address or an intersection' type='text'>
        </div>
      </div>

      <div class="col-md-4">
        <div class='form-group'>
            Within
            <select id='search-radius' class='form-control'>
              <option value='400'>2 blocks</option>
              <option value='805'>1/2 mile</option>
              <option value='1610'>1 mile</option>
              <option value='3220'>2 miles</option>
              <option value='8050'>5 miles</option>
            </select>
        </div>
      </div>
    </div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active probation-tab"><a href="#probation" role="tab" data-toggle="tab">Probation resources</a></li>
      <li class="community-tab"><a href="#community-sites" role="tab" data-toggle="tab">Community service</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Probation resources pane -->
      <div class="tab-pane active" id="probation">
        <p><strong>Filter probation resources.</strong> Click on each filter to view a list of options. You can select more than one.</p>
        <div>
          <div class="input-group select2-bootstrap-prepend">
            <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
            <select class="data-array-age form-control" id="select-age" multiple="multiple"></select>
          </div>

          <div class="input-group select2-bootstrap-prepend m-top-sm">
            <span class="input-group-addon"><i class="fa fa-globe" aria-hidden="true"></i></span>
            <select class="data-array-language form-control" id="select-language" multiple="multiple"></select>
          </div>

          <div class="input-group select2-bootstrap-prepend m-top-sm">
            <span class="input-group-addon"><i class="fa fa-building-o" aria-hidden="true"></i></span>
            <select class="data-array-type form-control" id="select-type" multiple="multiple"></select>
          </div>

          <div class="input-group select2-bootstrap-prepend m-top-sm">
            <span class="input-group-addon"><i class="fa fa-heart" aria-hidden="true"></i></span>
            <select class="data-array-program form-control" id="select-program" multiple="multiple"></select>
          </div>

          <div class="input-group select2-bootstrap-prepend m-top-sm m-bottom-sm">
            <span class="input-group-addon"><i class="fa fa-usd" aria-hidden="true"></i>&nbsp;</span>
            <select class="data-array-insurance form-control" id="select-insurance" multiple="multiple"></select>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <div class="checkbox">
              <label>
                <p><input id="lgbtq" type="checkbox">Show only facilities that specialize with LGBTQ</p>
              </label>
            </div>
          </div>
        </div>
      </div>
      <!-- Commuinity sites pane -->
      <div class="tab-pane" id="community-sites">
        <p><strong>Filter community service sites.</strong> Add filters, or return all community service sites (excludes probation resource locations).</p>
        <div class="checkbox">
          <label>
            <p><input id="handicapAccessible" type="checkbox">Handicap accessible</p>
          </label>
        </div>
        <div class="checkbox">
          <label>
            <p><input id="acceptsSexOffenders" type="checkbox">Accepts sex offenders</p>
          </label>
        </div>
      </div>

    </div> <!-- End tab panes -->

    <div>
      <button class='btn btn-search' id="btnSearch"><i class='fa fa-search'></i> Search</button>
      <a href="/" class='btn btn-reset' id="btnReset" data-toggle="tooltip" data-placement="bottom" title="Reset"><i class="fa fa-repeat" aria-hidden="true"></i></a>
      <button class='btn btn-change' id='btnViewMode' data-toggle='tooltip' data-placement="bottom" title='Change view'><i class='fa fa-list'></i></button>
      <button type="button" class='btn btn-save' data-toggle="modal" data-target="#saveModal"><i class='fa fa-star'></i> Save search</button>
    </div>

  </div>

  <div class='col-md-8'>
    <div id='mapCanvas' style="display: block; height: 1000px;"></div>
    <div id="listCanvas" style="display: none">
      <h2 class='list-header hidden-xs'>Search results</h2>
      <table class="table list-table table-striped">
        <thead>
          <tr>
            <th class='hidden-xs'></th>
            <th>Facility</th>
            <th class='hidden-xs'>Hours</th>
            <th class='hidden-xs'>Contact</th>
          </tr>
        </thead>
        <tbody id='results-list'></tbody>
      </table>
    </div>
  </div>

</div>

{% include modal.html %}

{% include save-search-modal.html %}

<style id="probation-maps-styles">
  #probationresourcesmap_mergeddata{
    marker-fill-opacity: 0.9;
    marker-line-color: #FFF;
    marker-line-width: 1;
    marker-line-opacity: 1;
    marker-placement: point;
    marker-type: ellipse;
    marker-width: 15;
    marker-fill: #3E7BB6;
    marker-allow-overlap: true;
  }
</style>

<script type="text/javascript" src="/js/map.js"></script>