{% extends "base.html" %}

{% block content %}
<main class="sidebar-aware">
  <div class="d-cool-page-start white-text">
    <span>{{ page.title }}</span>
  </div>
  <div class="d-page row">
    <div class="d-content col s12 m8 l8">
      {{ page.content }}
    </div>
    <div class="d-toc col hide-on-small-only m3">
      <div class="d-toc-wrapper pin-top">
        <h2>Contents</h2>
        <ul class="table-of-contents">
          {% for toc_item in page.toc %}
          <li><a href="{{ toc_item.url }}">{{ toc_item.title }}</a></li>
          {% for toc_item in toc_item.children %}
          <li><a href="{{ toc_item.url }}">{{ toc_item.title }}</a></li>
          {% endfor %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
  <div class="d-footer-nav-buttons row">
    {% if page.previous_page %}
    <a class="d-footer-nav-left col s1 m6" href="{{page.previous_page.url|url}}">
      <span>Previous</span>
      <div>
        <i class="material-icons">arrow_back</i>
        <span>{{page.previous_page.title}}</span>
      </div>
    </a>
    {% else %}
    <a class="d-footer-nav-left col s1 m6" href="#"></a>
    {% endif %}
    {% if page.next_page %}
    <a class="d-footer-nav-right col s10 m6" href="{{page.next_page.url|url}}">
      <span>Next</span>
      <div>
        <i class="material-icons">arrow_forward</i>
        <span>{{page.next_page.title}}</span>
      </div>
    </a>
    {% else %}
    <a class="d-footer-nav-right col s1 m6" href="#"></a>
    {% endif %}
  </div>
</main>
{% endblock %}