{% extends "base_docs.html" %}
{% block content %}
<a name="top"></a>
<h1><i class="bi bi-journal-text mr-3"></i>{{ page.meta.title }}</h1>
<!-- <p>Last update: {{ page.meta.date }}</p> -->
<br>

<hr class="border border-primary border-3">
<div class="row navigation">
    <div class="col-3" style="text-align: start;">
        {% if prev_page %}
            <a href="{{ url_for('documentation_detail', path=prev_page.path) }}"><i class="bi bi-arrow-left-circle-fill mr-2"></i>Prev</a>
        {% endif %}
    </div>
    <div class="col-6" style="text-align: center;">
        <a href="{{ url_for('documentation_index') }}">Table of Contents</a>
    </div>
    <div class="col-3" style="text-align: end;">
        {% if next_page %}
            <a href="{{ url_for('documentation_detail', path=next_page.path) }}">Next<i class="bi bi-arrow-right-circle-fill ml-2"></i></a>
        {% endif %}
    </div>
</div>
<hr class="border border-primary border-3">

<br>

<div>
    {{ page.html|safe }}
</div>

<br>

<hr class="border border-primary border-3">
<div class="row navigation">
    <div class="col-3" style="text-align: start;">
        {% if prev_page %}
            <a href="{{ url_for('documentation_detail', path=prev_page.path) }}"><i class="bi bi-arrow-left-circle-fill mr-2"></i>Prev</a>
        {% endif %}
    </div>
    <div class="col-6" style="text-align: center;">
        <a href="{{ url_for('documentation_index') }}">Table of Contents</a>
    </div>
    <div class="col-3" style="text-align: end;">
        {% if next_page %}
            <a href="{{ url_for('documentation_detail', path=next_page.path) }}">Next<i class="bi bi-arrow-right-circle-fill ml-2"></i></a>
        {% endif %}
    </div>
</div>
<hr class="border border-primary border-3">

<!-- <div id="bottom_fade"></div> -->

<a href="#top" id="topbutton" class="btn btn-link bg-transparent btn-floating">
    <i class="bi bi-arrow-up-circle-fill"></i>
</a>



{% endblock %}