_htmlstory.html

{#
 # Template for an HTML story published to P2P.
 #
 # If you want to publish multiple HTML stories, copy, or inherit from
 # this template.
 #
 #}
{% block content %}
<section class='intro'>
  {% include '_table.html' %}
  <div class="intro__text">
    {{ intro|markdown }}
  </div>
</section>
<h2 class='nations-title'>{{ nations_title }}</h2>
<p class='nations-subtitle'>{{ nations_subtitle }}</p>

{# <!-- This is the chart key --> #}
<dl class='nation-key'>
  <dt>
    <span></span>
  </dt>
  <dd>{{ legend_banned }}</dd>
</dl>

{# <!-- Loop through each nation in the spreadsheet, but only include those who have refugees here. The one exception is Libya, which is included here b/c it is on the banned list --> #}
<div id='nations' class='nations'>
	{% for nation in nations[1:]|sort(true, attribute="TOTAL_2007") %}
    {% if nation.BANNED == 1 or nation.TOTAL_2007 > 0 %}
      {% set n = nation %}
      {% set i = loop.index %}
      {% include '_nation-chart.html' %}
    {% endif %}
  {% endfor %}
</div>

{# <!-- The usual closing out stuff. --> #}

<div class='credits'>
  {{ sources|markdown }}
  {{ credits|markdown }}
</div>

{% endblock content %}

{% block library_scripts %}
{# Uncomment this if you are using libraries such as jQuery #}
<script src="//{{ ROOT_URL }}/js/vendor.min.js"></script>
{% endblock %}

{% block scripts %}
{# Uncomment this if you are using custom JavaScript #}
<script src="//{{ ROOT_URL }}/js/app.min.js"></script>
<script>
(function(document) {

  window.data = {{ nations|tojson }};
  window.cities = {{ cities|tojson }};

  var CSS = [
    "//{{ ROOT_URL }}/css/styles.css"
  ];
  CSS.forEach(function(url) {
    var link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('href', url);
    document.head.appendChild(link);
  });
})(document);
</script>
{% endblock scripts %}