{% extends "core/base.html" %}

{% block title %}{{ page.display_name }}{% endblock title %}

{% block page_title %}{{ page.display_name }}{% endblock %}

{% block body %}
    <section id="content" aria-labelledby="cms-title">
        <div class="row">
            <div class="{% if page.display_toc %}border-right medium-8 small-12{% else %}medium-12{% endif %} columns">
                <h1 id="cms-title">{{ page.display_name }}</h1>
                <hr aria-hidden="true" />
                <div id="main_article">
                    {{ page.content|safe }}
                </div>
            </div>
            {% if page.display_toc %}
                <aside class="medium-4 columns sticky-container hide-for-small-only">
                    <div class="sticky" data-sticky data-margin-top="0"
                         data-anchor="content" data-sticky-on="large">
                        <section aria-labelledby="toc-title">
                            <div class="section">
                                <h2 id="toc-title">{% trans "Table of Contents" %}</h2>
                                <ul id="toc">

                                </ul>
                            </div>
                        </section>
                    </div>
                </aside>
            {% endif %}
        </div>
    </section>
{% endblock body %}