{% extends 'base.html' %}

{% from 'inc/nav/side-tree-nav.html' import side_tree_nav %}

{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='tutorial.css')|autoversion }}">
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='tutorial.js')|autoversion }}"></script>
{% endblock %}

{% block content %}
    <div class="g-grid">
        <aside class="g-3">
            <div class="js-side-tree-nav">
                {{ side_tree_nav(nav.tutorials.content) }}
            </div>
        </aside>

        <article role="main" class="page-content g-9"{%- if site.contenteditable -%} contenteditable="true"{%- endif -%}>
            {% include 'inc/edit-on-github-link.html' %}

            <h1>
                {{ page.meta.title }}
            </h1>
            <table>
                {% if page.meta.showAuthorInfo %}
                    <tr>
                        <td>
                            <strong>Author</strong>
                        </td>
                        <td>
                            {{ page.meta.authors }}
                        </td>
                    </tr>
                {% endif %}
                {% if page.meta.date %}
                    <tr>
                        <td>
                            <strong>Last Updated</strong>
                        </td>
                        <td>
                            {{ page.meta.formatted_date }}
                        </td>
                    </tr>
                {% endif %}
                {% if page.meta.source %}
                    <tr>
                        <td>
                            <strong>Source</strong>
                        </td>
                        <td>
                            <a href="{{ site.code_baseurl }}/tutorials/{{ page.meta.source }}">On GitHub</a>
                        </td>
                    </tr>
                {% endif %}
            </table>
            {% if page.meta.description %}
                {{ page.meta.description }}
                <br/>
                <br/>
            {% endif %}
            {{ page.html | safe }}
        </article>
    </div>
{% endblock %}