{% 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">
    {% if page.meta["hide-toc"] %}
    <div class="d-content col s12 m8 l8">
      {{ page.content }}
    </div>
    {% else %}
    <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">
          {% set toc_depth = page.meta["toc-depth"] or 2 %}
          {% for toc_item in page.toc %}
          <li><a href="{{ toc_item.url }}" style="padding-left: 12px;">{{ toc_item.title }}</a></li>
          {% if toc_depth >= 2 %}
          {% for sub_item in toc_item.children %}
          <li><a href="{{ sub_item.url }}" style="padding-left: 24px;">{{ sub_item.title }}</a></li>
          {% if toc_depth >= 3 %}
          {% for sub_sub_item in sub_item.children %}
          <li><a href="{{ sub_sub_item.url }}" style="padding-left: 36px;">{{ sub_sub_item.title }}</a></li>
          {% if toc_depth >= 4 %}
          {% for sub_sub_sub_item in sub_sub_item.children %}
          <li><a href="{{ sub_sub_sub_item.url }}" style="padding-left: 48px;">{{ sub_sub_sub_item.title }}</a></li>
          {% endfor %}
          {% endif %}
          {% endfor %}
          {% endif %}
          {% endfor %}
          {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>
    {% endif %}
  </div>
  {% if page.meta["hide-footer"] %}
  {% else %}
  <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>
  {% endif %}
</main>
{% endblock %}