website/app/templates/site/index.j2

{% extends "layout/backend.j2" %}
{% block content %}
<h1>Backend</h1>
<p>List of pages</p>
<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th>Action</th>
                <th>Title</th>
                <th>Datum</th>
                <th>Author</th>
            </tr>
        </thead>
        <tbody>
            {%- for page in pages recursive -%}
            <tr>
                <td>
                    <div class="btn-group">
                        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="{{ url_for('backend.view_page', page_id=page.id) }}">View</a>
                            <a class="dropdown-item" href="{{ url_for('backend.edit_page', page_id=page.id) }}">Edit</a>
                            <a class="dropdown-item" href="{{ url_for('backend.remove_page', page_id=page.id) }}">Remove</a>
                        </div>
                    </div>
                </td>
                <td>
                    {{ '> ' * (loop.depth - 1) }}<a href="{{ url_for('backend.view_page', page_id=page.id) }}">
                        {{ page.title if page.title else 'page %s' % page.id }}
                    </a>
                </td>
                <td>{{ page.datetime }}</td>
                <td>{{ page.user.name }}</td>
            </tr>
            {{ loop(page.children) }}
            {%- endfor -%}
        </tbody>
    </table>
</div>
{% endblock %}