Search Filter Complete

  <div class="c-filter u-spacing u-background-color--gray--light u-padding u-theme--border-color--darker u-border--left can-be--dark-dark">
    <form action="" role="search" method="get" class="c-filter__search">
      <div class="l-field-container u-spacing">
        <input type="search" name="s" class="u-font--secondary--s u-color--gray" value="Search..."/>
        <div class="u-flex">
          <button class="c-filter__button o-button o-button--outline u-space--right">
            <span class="u-icon u-icon--xs u-path-fill--base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__search</title><path d="M9.91,8.5,7.43,6A4,4,0,1,0,4,8a4,4,0,0,0,2-.57L8.5,9.91ZM2,4A2,2,0,1,1,4,6,2,2,0,0,1,2,4Z" fill="#777"/></svg>
</span>Search</button>
          <!-- /.search-form__submit -->
          <span class="c-filter__toggle js-toggle o-button o-button--simple" data-toggled="c-filter" data-prefix="c-filter"><span class="u-icon u-icon--xs u-theme--path-fill--base"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14"><title>Pattern Lab Tools</title><path fill="#808080" d="M12.767 8.343c-0.735-1.272-0.293-2.903 0.986-3.643l-1.376-2.383c-0.393 0.23-0.85 0.363-1.338 0.363-1.47 0-2.662-1.2-2.662-2.68h-2.752c0.004 0.457-0.11 0.92-0.355 1.343-0.735 1.272-2.367 1.705-3.649 0.967l-1.376 2.383c0.396 0.225 0.739 0.555 0.983 0.977 0.733 1.27 0.294 2.897-0.98 3.64l1.376 2.383c0.392-0.228 0.847-0.359 1.332-0.359 1.466 0 2.654 1.192 2.662 2.665h2.752c-0.001-0.452 0.113-0.91 0.355-1.329 0.733-1.27 2.362-1.703 3.642-0.971l1.376-2.383c-0.393-0.225-0.734-0.554-0.977-0.974zM7 9.835c-1.566 0-2.835-1.269-2.835-2.835s1.269-2.835 2.835-2.835c1.566 0 2.835 1.269 2.835 2.835s-1.269 2.835-2.835 2.835z"></path></svg>
</span></span>
        </div>
      </div>
    </form>
    <!-- ./c-filter__form -->
    <form class="c-filter__form u-spacing">
      <div class="c-filter__form-item u-spacing--half">
        <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-theme--color--base">Filter</h3>
                              <div class="c-filter__form-group">
              <input id="checkbox-1" type="checkbox" name="checkbox" value="Option 1"/>
              <label for="checkbox-1">Option 1</label>
            </div>
                      <div class="c-filter__form-group">
              <input id="checkbox-2" type="checkbox" name="checkbox" value="Option 2"/>
              <label for="checkbox-2">Option 2</label>
            </div>
                        </div>
      <div class="c-filter__form-item u-spacing--half">
        <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-theme--color--base">Sort By</h3>
                              <div class="c-filter__form-group">
              <input id="radio-1" type="radio" name="radio" value="Option 1"/>
              <label for="radio-1">Option 1</label>
            </div>
                      <div class="c-filter__form-group">
              <input id="radio-2" type="radio" name="radio" value="Option 2"/>
              <label for="radio-2">Option 2</label>
            </div>
                        </div>
    </form>
    <!-- ./c-filter__form -->
  </div>
  <!-- ./c-filter -->

{% if search_filter %}
  <div class="c-filter u-spacing u-background-color--gray--light u-padding u-theme--border-color--darker u-border--left can-be--dark-dark">
    <form action="" role="search" method="get" class="c-filter__search">
      <div class="l-field-container u-spacing">
        <input type="search" name="s" class="u-font--secondary--s u-color--gray" value="Search..."/>
        <div class="u-flex">
          <button class="c-filter__button o-button o-button--outline u-space--right">
            <span class="u-icon u-icon--xs u-path-fill--base">{% include '@atoms/icons/icon-search.twig' %}</span>Search</button>
          <!-- /.search-form__submit -->
          <span class="c-filter__toggle js-toggle o-button o-button--simple" data-toggled="c-filter" data-prefix="c-filter"><span class="u-icon u-icon--xs u-theme--path-fill--base">{% include '@atoms/icons/icon-settings.twig' %}</span></span>
        </div>
      </div>
    </form>
    <!-- ./c-filter__form -->
    <form class="c-filter__form u-spacing">
      <div class="c-filter__form-item u-spacing--half">
        <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-theme--color--base">Filter</h3>
        {% if search_filter.checkbox %}
          {% for item in search_filter.checkbox %}
            <div class="c-filter__form-group">
              <input id="checkbox-{{ item.id }}" type="checkbox" name="checkbox" value="{{ item.label }}"/>
              <label for="checkbox-{{ item.id }}">{{ item.label }}</label>
            </div>
          {% endfor %}
        {% endif %}
      </div>
      <div class="c-filter__form-item u-spacing--half">
        <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-theme--color--base">Sort By</h3>
        {% if search_filter.radio %}
          {% for item in search_filter.radio %}
            <div class="c-filter__form-group">
              <input id="radio-{{ item.id }}" type="radio" name="radio" value="{{ item.label }}"/>
              <label for="radio-{{ item.id }}">{{ item.label }}</label>
            </div>
          {% endfor %}
        {% endif %}
      </div>
    </form>
    <!-- ./c-filter__form -->
  </div>
  <!-- ./c-filter -->
{% endif %}