<!DOCTYPE html>
<html>
    {% include head.html %}
    {% include article-page-head.html %}
    <body>
        <!-- cookie notice is included automatically -->
        {% include cookie-notice.html %}

        <!-- content of navbar is included via jQuery -->
        {% include navbar.html %}

        <div class="mdc-drawer-app-content">
            {% include top-app-bar.html %}

            <main class="main-content" id="main-content">
                <div class="mdc-top-app-bar--short-fixed-adjust">
                    <h2 class="mdc-typography--headline3">{{ page.title }}</h2>
                    <h3 class="mdc-typography--subtitle1">
                        <time class="timeago" datetime="{{ page.date | date: '%Y-%m-%d' }}T{{ page.date | date: '%H:%M:%S' }}">{{ page.date | date: '%A %e %B %Y' }}</time>
                         | by {{ page.authors }}
                    </h3>
                    <figure>
                        <img src="/images/{{ page.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--cover.jpg" style="width:100%;">
                        <figcaption class="mdc-typography--caption-text">{{ page.image-caption }}</figcaption>
                    </figure>
                    {{ content }}

                    {% include article-carousel.html %}
                </div>
            </main>
            {% include footer.html %}
            {% include top-scroll-button.html %}
        </div>
    </body>
</html>
