{% extends base_template %}
{% load i18n static %}

{% block content %}
<h1>{% translate "Table of Contents" %}</h1>

{% for toc_section,pages_1,pages_2 in toc %}
<h2>{{ toc_section }}</h2>
<div class="row gx-4 mb-2">
<div class="col-lg-6">
    <ul style="list-style-type:none;" class="mb-0 ps-0">
{% for page in pages_1 %}
    <li>
        <a class="icon-link icon-link-hover" href="{% url 'tinywiki:page' page.slug %}">
            {{ page.title }}
            {% if page.is_system %}
            <svg class="bi"><use xlink:href="{% static 'icons/bootstrap-icons.svg' %}#journal" ></use></svg>
            {% else %}
            <svg class="bi"><use xlink:href="{% static 'icons/bootstrap-icons.svg' %}#book" ></use></svg>
            {% endif %}
        </a>
    </li>
{% endfor %}
    </ul>
</div>
<div class="col-lg-6">
    <ul style="list-style-type:none;" class="mt-0 ps-0">
{% for page in pages_2 %}
        <li>
            <a class="icon-link icon-link-hover" href="{% url 'tinywiki:page' page.slug %}">
            {{ page.title }}
            {% if page.is_system %}
            <svg class="bi"><use xlink:href="{% static 'icons/bootstrap-icons.svg' %}#journal" ></use></svg>
            {% else %}
            <svg class="bi"><use xlink:href="{% static 'icons/bootstrap-icons.svg' %}#book" ></use></svg>
            {% endif %}
        </a>
        </li>
{% endfor %}
    </ul>
</div>
</div>
{% endfor%}
{% endblock %}
