feat: flags for each country

breweries.html

@@ -21,7 +21,7 @@ <h1 class="banner-head">I have sampled {{ site.data.breweries | size }} differen
 	{% for brewery in site.data.breweries %}
 	<tr>
 	  <td>
-      <span class="fi fi-{{ brewery.ISO3166Alpha2 | downcase }}"></span>
+            <span class="fi fi-{{ brewery.ISO3166Alpha2 | downcase }}"></span>
 	    <a class="external brewery" href="https://untappd.com/brewery/{{ brewery.id }}" target="_blank" rel="noopener noreferrer">{{ brewery.name }}</a>
 	    <span id="{{ brewery.id }}-beers" style="float: right; text-align: right; display: table;">
               <button id="{{ brewery.id }}-show" type="button" onClick="toggleShowAll(event)">Show beers</button>

countries.html

@@ -30,6 +30,16 @@ <h1 class="banner-head">I have had beers from {{ site.data.countries | size }} d
 	      </tr>
       </thead>
       <tbody class="list">
+        {% for country in site.data.countries %}
+        <tr>
+          <td class="name">
+            <span class="fi fi-{{ country.id | downcase }}"></span>
+            {{ country.name }}
+          </td>
+          <td valign="top" class="checkins">{{ country.checkins }}</td>
+          <td valign="top" class="breweries">{{ country.breweries }}</td>
+        </tr>
+        {% endfor %}
       </tbody>
     </table>
   </div>
@@ -39,11 +49,9 @@ <h1 class="banner-head">I have had beers from {{ site.data.countries | size }} d
 <script>
   let options = {
     valueNames: [ "name", "checkins", "breweries" ],
-    item: '<tr><td class="name"></td><td valign="top" class="checkins"></td><td valign="top" class="breweries"></td></tr>'
   };
 
-  countryData = {{ site.data.countries | jsonify }};
-  countryList = new List("countries", options, countryData);
+  countryList = new List("countries", options);
 
   function zoomOut() {
     countryList.clear();