{% extends 'base.html' %}
{% load docpage_extras %}
{% load bleach %}

{% block title %}
    {{ currentdocpage.title }} - {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'documentation:home' %}">Documentation</a></li>
        {% if currentdocpage.parent %}
            {% if currentdocpage.parent.parent %}
                {% if currentdocpage.parent.parent.parent %}
                    <li class="breadcrumb-item"><a href="{% url 'documentation:detail' slug=currentdocpage.parent.parent.parent.slug %}">
                        {{ currentdocpage.parent.parent.parent.title }}
                    </a></li>
                {% endif %}
                <li class="breadcrumb-item"><a href="{% url 'documentation:detail' slug=currentdocpage.parent.parent.slug %}">
                        {{ currentdocpage.parent.parent.title }}
                </a></li>
            {% endif %}
            <li class="breadcrumb-item"><a href="{% url 'documentation:detail' slug=currentdocpage.parent.slug %}">
                    {{ currentdocpage.parent.title }}
            </a></li>
        {% endif %}
        <li class="breadcrumb-item active"
            aria-current="page">
                {{ currentdocpage.title }}
        </li>
    </ol>
{% endblock %}

{% block sidebar %}
    <div class="col-lg-4 col-md-4">
        <nav class="documentation-sidebar p-3 sticky-top">
            <ul class="nav flex-column" id="documentation_nav_accordion">
                {% for page in top_level_pages %}
                    {% get_subordinate_pages page as subpages %}
                    {% if not subpages %}
                        <li class="nav-item mb-1">
                            <a class="nav-link rounded {% if page == currentdocpage %}active {% endif %}text-white bg-dark"
                               id="{{ page.slug }}"
                               href="{% url 'documentation:detail' slug=page.slug %}">
                                    {{ page.title }}
                            </a>
                        </li>
                    {% else %}
                        <li class="nav-item mb-1 rounded">
                            <a class="nav-link rounded {% if page == currentdocpage or currentdocpage in subpages %}active{% endif %} text-white bg-dark"
                               id="{{ page.slug }}"
                               href="{% url 'documentation:detail' slug=page.slug %}">
                                    {{ page.title }} &nbsp;&nbsp;<i class="fas fa-caret-down"></i>
                            </a>
                                <ul class="rounded {% if currentdocpage == page or currentdocpage in subpages %}collapse show{% else %}collapse hide{% endif %} list-group">
                                    {% for subpage in page.children.all %}
                                        {% get_subordinate_pages subpage as subpage_subpages %}
                                        {% if not subpage_subpages %}
                                            <li class="list-group-item border-0 p-0 {% if subpage == page.children.first %}mt-1{% endif %} mb-1">
                                                <a class="nav-link rounded {% if subpage == currentdocpage  %}active font-weight-bold{% endif %} text-primary bg-light"
                                                   id="{{ subpage.slug }}"
                                                   href="{% url 'documentation:detail' slug=subpage.slug %}">
                                                        {{ subpage.title }}
                                                </a>
                                            </li>
                                        {% else %}
                                            <li class="list-group-item border-0 p-0 mb-1 {% if subpage == page.children.first %}mt-1{% endif %}">
                                                <a class="nav-link rounded {% if subpage == currentdocpage  %}active font-weight-bold{% endif %} text-primary bg-light"
                                                   id="{{ subpage.slug }}"
                                                   href="{% url 'documentation:detail' slug=subpage.slug %}">
                                                        {{ subpage.title }} &nbsp;&nbsp;<i class="fas fa-caret-down"></i>
                                                </a>
                                            </li>
                                            <ul class="rounded {% if currentdocpage == subpage or currentdocpage in subpage_subpages %}collapse show{% else %}collapse hide{% endif %} list-group">
                                                {% for tertiarypage in subpage.children.all %}
                                                    {% if not tertiarypage.children.all %}
                                                        <li class="list-group-item border p-0 mb-1">
                                                            <a class="nav-link rounded {% if tertiarypage == currentdocpage %}active font-weight-bold{% endif %} text-primary"
                                                               id="{{ tertiarypage.slug }}"
                                                               href="{% url 'documentation:detail' slug=tertiarypage.slug %}">
                                                                    {{ tertiarypage.title }}
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li class="list-group-item border {% if tertiarypage == currentdocpage or currentdocpage in tertiarypage.children.all %}border-bottom-0 {% else %}mb-1{% endif %} p-0">
                                                            <a class="nav-link rounded {% if tertiarypage == currentdocpage %}active font-weight-bold{% endif %} text-primary"
                                                               id="{{ tertiarypage.slug }}"
                                                               href="{% url 'documentation:detail' slug=tertiarypage.slug %}">
                                                                    {{ tertiarypage.title }}&nbsp;&nbsp;<i class="fas fa-caret-down"></i>
                                                            </a>
                                                        </li>
                                                        <ul class="border-left border-right border-bottom {% if currentdocpage == tertiarypage or currentdocpage in tertiarypage.children.all %} collapse show {% else %} collapse hide {% endif %} list-group mb-1">
                                                            {% for fourthpage in tertiarypage.children.all %}
                                                                <li class="p-0 mb-1 ml-5 mr-3">
                                                                    <a class="nav-link {% if fourthpage == currentdocpage %}active font-weight-bold{% endif %} text-primary pl-2"
                                                                       id="{{ fourthpage.slug }}"
                                                                       href="{% url 'documentation:detail' slug=fourthpage.slug %}">
                                                                            {{ fourthpage.title }}
                                                                    </a>
                                                                </li>
                                                            {% endfor %}
                                                        </ul>
                                                    {% endif %}
                                                {% endfor %}
                                            </ul>
                                        {% endif %}
                                    {% endfor %}
                                </ul>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </nav>
    </div>
{% endblock %}

{% block content %}
        <div class="row mt-3">
            <div class="col-12 col-sm-6 col-md-7 d-inline-block text-left">
                {% if 'documentation.change_docpage' in perms %}
                    <a class="btn btn-md btn-outline-dark d-inline-flex" href="{% url 'documentation:list' %}">Page overview</a>
                    <a class="btn btn-md btn-outline-dark d-inline-flex" href="{% url 'documentation:create' %}">Add</a>
                    <a class="btn btn-md btn-outline-dark" href="{% url 'documentation:update' slug=currentdocpage.slug %}">Edit</a>
                {% endif %}
            </div>
            <div class="col-12 col-sm-6 col-md-5 justify-content-start justify-content-sm-end form-inline">
                <form>
                    <input class="form-control mb-1" type="text" name="query" placeholder="Search...">
                </form>
            </div>
        </div>
    {% if search_results != None %}
        <div class="mt-4" id=pageContainer>
            {% if search_results %}
                {% for result in search_results %}
                    <div class="card rounded border-light my-1">
                        <a href="{% url 'documentation:detail' slug=result.slug %}"><h5 class="pl-3 pt-3">{{ result.title }}</h5></a>
                        <div class="mb-3 pl-3">{{ result.headline|clean }}</div>
                    </div>
                {% endfor %}
            {% else %}
                <div>There are no matches for <b>{{ query }}</b>.</div>
            {% endif %}
        </div>
    {% else %}
        <div class="mt-4" id=pageContainer>{{ currentdocpage.content|md2html }}</div>
        <div class="row">
            <div class="d-inline-block col-6 text-left">
                {% if currentdocpage.previous %}
                    <a class="btn btn-md btn-outline-dark" href="{% url 'documentation:detail' slug=currentdocpage.previous.slug %}">Previous section</a>
                {% endif %}
            </div>
            <div class="d-inline col-6 text-right">
                {% if currentdocpage.next %}
                    <a class="btn btn-md btn-outline-dark" href="{% url 'documentation:detail' slug=currentdocpage.next.slug %}">Next section</a>
                {% endif %}
            </div>
        </div>
    {% endif %}
{% endblock %}