SpeciesFileGroup/taxonworks

<div id="filter">
  <div class="flexbox">
    <div class="item item2">
      <div class="panel">
        <div class='flex-separate content middle action-line'>
          <span class="filter-title">FILTER CARDS</span>
          <div class="small-icon reset" data-filter-category="reset" data-icon="reset" data-help="Remove filters, show everything.">
            Reset
          </div>
        </div>

        <form class="content" data-help="Choose only those options that contain the provided text in the title or description.">
          <input type="text" placeholder="Filter cards by text description" class="item mousetrap" id="search-filter" autofocus="true">
        </form>
        <span class="content filter-title">CATEGORIES</span>
        <div class="navigation-controls navigation-controls-type separate-bottom">
          <div data-filter-category="filters" data-favorite="true" class="navigation-item">Filters</div>
          <div data-filter-category="browse" data-favorite="true" class="navigation-item">Browse</div>
          <div data-filter-category="new" data-favorite="true" class="navigation-item">New</div>
        </div>
        <div class="navigation-controls separate-bottom flex-wrap-row">
          <% UserTasks::CATEGORIES.each do |c| -%>
            <%= content_tag(:div, c.humanize, 'data-filter-category' => c, 'data-favorite' => true, 'class' => 'navigation-item') -%>
          <% end %>
        </div>
        <span class="content filter-title">STATUS</span>

        <div class="filter-status" data-help="Show only those features whose interfaces and functionality are at a certain level of completion. Red: expect major change; Yellow: functionality is more or less stable, form may change; Green: form and functionality are stable.">
          <label class="switch">
            <input type="checkbox" data-switch="false">
            <div class="slider"></div>
            <div class="status-name">Status</div>
          </label>
          <div class="filter-category">
            <div class="status unknown" data-filter-category="unknown"></div>
            <div class="status prototype" data-filter-category="prototype"></div>
            <div class="status stable" data-filter-category="stable"></div>
            <div class="status complete" data-filter-category="complete"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>