beers.html

---
layout: default
---

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

<div class="l-content information">
  {% assign title = site.data.beers %}
  <div class="pure-u-1" id="beers">
    <input class="search" placeholder="Filter">
    <table class="pure-table pure-table-striped" style="width: 100%;">
      <thead>
	      <tr>
	        <th class="sort" data-sort="beer">Beer</th>
	        <th class="sort" data-sort="abv" style="min-width: 2.7em;">ABV</th>
	        <th class="sort" data-sort="ibu" style="min-width: 2.7em;">IBU</th>
	        <th class="sort" data-sort="style" style="min-width: 2.7em;">Style</th>
	        <th class="sort" data-sort="avg_rating" style="min-width: 2.7em;">Avg rating</th>
	        <th class="sort" data-sort="checkins" style="min-width: 5.1em;">Checkins</th>
	        <th class="sort" data-sort="first_checkins" style="min-width: 5.1em;">First checkin</th>
	        <th class="sort" data-sort="brewery">Brewery</th>
	      </tr>
      </thead>
      <tbody class="list">
	{% for beer in site.data.beers %}
	<tr>
	  <td>
	    <a class="external beer" href="https://untappd.com/beer/{{ beer.id }}" target="_blank" rel="noopener noreferrer">{{ beer.name }}</a>
	  </td>
	  <td class="abv">
	    {{ beer.abv }}
	  </td>
	  <td class="ibu">
	    {{ beer.ibu }}
	  </td>
	  <td class="style">
	    {{ beer.type }}
	  </td>
	  <td class="avg_rating">
	    {{ beer.avg_rating }}
	  </td>
	  <td class="checkins">
	    {{ beer.checkins }}
	  </td>
	  <td class="first_checkins">
	    {{ beer.checkin_at }}
	  </td>
	  <td>
	    <a class="external brewery" href="https://untappd.com/brewery/{{ beer.brewery_id }}" target="_blank" rel="noopener noreferrer">{{ beer.brewery }}</a>
	  </td>
	</tr>
	{% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script>
  let options = {
    valueNames: [ "beer", "abv", "ibu", "style", "avg_rating", "checkins", "first_checkins", "brewery" ]
  };

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