{% set icons = glob('./source/images/icons', 'svg') %}



<div class="o-wrapper u-1/1">
  <div class="o-grid">
      <div class="o-grid__item u-1/1 u-1/3@small">
        <form class="c-form o-island">
          <div class="c-form__field">
            <label class="c-label">Search for an icon</label>
            <input class="c-input c-input--full js-shuffle-search" type="search" placeholder="Ex. social" />
          </div>
        </form>
      </div>

      <div class="o-grid__item o-grid__item--bottom u-1/1 u-1/3@small">
        <div class="o-island">
          <a href="/images/icons/all-icons.zip" download>Download All Icons
          <svg class="c-icon c-icon-download " viewBox="0 0 24 24" alt="download icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use>
          </svg></a>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="row">
    <div class="col-9@sm">
      <p class="filter__label">Filter:</p>
      <div class="js-shuffle-filter-options btn-group">
        <button class="btn btn--warning" data-category="industry">Industry Icons</button>
        <button class="btn btn--warning" data-category="product">Product Icons</button>
        <button class="btn btn--warning" data-category="resource">Resouce Icons</button>
      </div>
    </div>
    <div class="col-3@sm">
      <div class="m-nofloat pull-right">
        <p class="filter__label">Sort:</p>
        <select class="js-shuffle-sort-options">
          <option value>Default</option>
          <option value="data-name">Icon Name</option>
          <option value="data-modified">Last Modified</option>
        </select>
      </div>
    </div>
  </div> -->
</div>



<div class="o-grid o-wrapper js-shuffle-container u-1/1">
  {% for iconName in icons %}

      <div
      class="o-grid__item u-1/3 u-1/4@tiny u-1/5@small u-1/6@medium js-shuffle-item"
      data-name="{{ iconName }}"
      data-modified="{{ lastmodified(iconName ~ '.svg') }}"
      data-keywords="{{ icon_data[iconName]["keywords"]|join(' ') }}"
      data-category="{{ icon_data[iconName]["category"] }}"
      >
        <div class="c-icon-demo">
          {% include "@atoms/icons/_icon.twig" with {
            icon: {
              name: iconName,
              classes: "c-icon-demo__icon"
            }
          } %}
        </div>

        {% include "@atoms/typography/headings/h2.twig" with {
          heading: {
            text: iconName,
            classes: "c-heading--small c-heading--center js-icon-title"
          }
        } %}
      </div>
  {% endfor %}

  <div class="o-grid__item u-1/3 u-1/4@tiny u-1/5@small u-1/6@medium js-shuffle-sizer-element" style="position: absolute; visibility: hidden;"></div>
</div>