goal.html

{% include head.html %}
{% include header.html %}

<div class="heading goal-{{page.sdg_goal}}">
  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-md-3 col-lg-2">
        <img src="{{ site.baseurl }}/assets/img/goals/{{ page.sdg_goal }}.png" alt="{{ goal.short }} - Goal {{ goal.goal }}" />
      </div>
      <div class="col-xs-8 col-md-9 col-lg-10">
        <h1>
          {% assign goal = site.goals | where: "sdg_goal", page.sdg_goal | first %}
          <span class="hidden-sm hidden-md hidden-lg">Goal {{page.sdg_goal}}: </span>{{ goal.title }}
        </h1>
      </div>
    </div>
  </div>
</div>

<div id="main-content" class="container goal-indicators goal-{{page.sdg_goal}}">

  {{ content }}
  {% include components/breadcrumb.html %}

  {% assign goal_indicators = site.data.meta | where: 'sdg_goal', page.sdg_goal %}
  {% for indicator in goal_indicators %}

    {% if indicator.reporting_status == 'notstarted' %}
      {% assign status_desc = 'Exploring data sources' %}
      {% assign status_css = 'danger' %}          
    {% endif %}
    {% if indicator.reporting_status == 'inprogress' %}
      {% assign status_desc = 'Statistics in progress' %}     
      {% assign status_css = 'warning' %}          
    {% endif %}
    {% if indicator.reporting_status == 'complete' %}
      {% assign status_desc = 'Reported online' %} 
      {% assign status_css = 'success' %}
    {% endif %}

    {% cycle 'add row' : '<div class="indicator-cards row no-gutters">', '', '', '' %}
        <div class="col-md-6 col-lg-3">
          <a href="{{ site.baseurl }}/{{ indicator.indicator | slugify }}"><span>{{ indicator.indicator }}<span class="status {{ status_css }}">{{ status_desc }}</span></span> {{ indicator.title }}</a>
        </div>
    {% cycle 'end row' : '', '', '', '</div>' %}
    {% endfor %}
	 	{% assign last_row = goal_indicators.size | modulo:4 %}
		{% if last_row != 0 %}
			</div>
		{% endif %}
</div>

{% include footer.html %}