{% extends "base.html" %}

{% block title %}{{ page_name }}{% endblock %}

{% block navigation %}
{# Purely internal navigation links to take you up/down the page #}
<ul class="nav">
    {% for section in sections | sort(attribute="name") %}
    <li><a href="#{{ section.id }}">{{ section.name }}</a></li>
    {% endfor %}
</ul>
{% endblock %}

{% block content %}
{# Show off our figures! #}
{% for section in sections | sort(attribute="name") %}
<div class="section" id="{{ section.id }}">
    <h1>{{ section.name }}</h1>
    <div class="plot-container">
        {% for plot in section.plots %}
        <div class="plot">
            <a class="lightbox" href="#{{ plot.hash }}">
                <img src="{{ plot.filename }}" />
            </a>
            <h3>{{ plot.title }}</h3>
            <p>{{ plot.caption }}</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endfor %}

{# Create lightbox targets. #}
{% for section in sections | sort(attribute="name") %}
    {% for plot in section.plots %}
    <div class="lightbox-target" id="{{ plot.hash }}">
        <img src="{{ plot.filename }}" />
        <h3>{{ plot.title }}</h3>
        <p>{{ plot.caption }}</p>
        <a class="lightbox-close" href="#{{ section.id }}"></a>
    </div>
    {% endfor %}
{% endfor %}
{% endblock %}

{% block footer %}
<p>
    Created with version {{ pipeline_version }} of lmsi
    on {{ creation_date }}.
</p>
{% endblock %}