<div id="map-viewport" data-controller-action-template="$Link('%method')">
  <input type="checkbox" id="toggle" checked>
  <div id="mapbar">$Map</div>
  <div id="sidebar">

    <div class="tab-strip tabs-three clearfix">
      <label class="toggle" for="toggle"><i class="fa fa-map-o" aria-hidden="true"></i></label>
      <input type="radio" name="tab" id="tab_types" data-tab-pane=".tab-pane.types" checked><label for="tab_types">Types</label>
      <input type="radio" name="tab" id="tab_products" data-tab-pane=".tab-pane.products"><label for="tab_products">Products</label>
      <input type="radio" name="tab" id="tab_stations" data-tab-pane=".tab-pane.stations"><label for="tab_stations">Stations</label>
    </div>

    <div id="filter-indicator" class="unfiltered"></div>

    <div class="tab-pane types visible">
      <h3>Station Types:</h3>
      <span class="station-toggle all">view all</span> |
      <span class="station-toggle none">view none</span>
      <ul>
      </ul>
    </div>

    <div class="tab-pane products hidden unfiltered" data-query-param="ProductGenerators__ID">
      <h3>Search Products</h3>
      <input class="search-field" placeholder="Enter product name" data-target-url="getProductList">
      <ul>
          $ProductList
      </ul>
    </div>

    <div class="tab-pane stations hidden unfiltered" data-query-param="ID">
      <h3>Search Stations</h3>
      <input class="search-field" placeholder="enter name or identifier" data-target-url="getStationList">
      <ul>
          $StationList
      </ul>
    </div>

  </div>
</div>
