styles.html

---
layout: default
---

<div class="banner">
  <h1 class="banner-head">I have tried {{ site.data.styles | size }} different styles</h1>
</div>

<div class="l-content information">
  {% assign title = site.data.styles %}
  <div class="pure-u-1" id="styles">
    <input class="search" placeholder="Filter">
    <table class="pure-table pure-table-striped" style="width: 100%;">
      <thead>
	      <tr>
	        <th class="sort" data-sort="style">Style</th>
	        <th class="sort" data-sort="unique">Unique</th>
	        <th class="sort" data-sort="checkins">Checkins</th>
	      </tr>
      </thead>
      <tbody class="list">
	{% for style in site.data.styles %}
	<tr>
	  <td class="style">
	    {{ style.type }}
	  </td>
	  <td class="unique">
	    {{ style.distinct }}
	  </td>
	  <td class="checkins">
	    {{ style.total }}
	  </td>
	</tr>
	{% endfor %}
      </tbody>
    </table>
  </div>
  <h3>Styles left to try</h3>
  <p>{{ site.data.missing_styles | join: "<br />" }}</p>
</div>


<script>
  let options = {
    valueNames: [ "style", "unique", "checkins" ]
  };

  let styles = new List("styles", options);
</script>