{% extends "site.html" %}

{% block header_meta %}
    <span class="muted">{{ post_macros::meta(page=page) }}</span>
{% endblock header_meta %}

{% block body %}
    <article class="single" itemscope itemtype="http://schema.org/BlogPosting">
        {#
        <header>
            <h1 itemprop="headline">{{ page.title }}</h1>
            <span class="muted">{{ post_macros::meta(page=page) }}</span>
        </header>
        #}

        {# Table of contents #}
        {% if page.extra.toc -%}
            <div id="toc-container">
                <h4>Table of contents</h4>
                <select id="toc-select">
                    {# Post title #}
                    <option value="{{ current_url }}#">{{ page.title }}</option>
                    <option disabled>──────────</option>

                    {# Post headers, with children #}
                    {% for h1 in page.toc %}
                        <option value="{{ h1.permalink | safe }}">{{ loop.index }}. {{ h1.title }}</option>
                        {% if h1.children %}
                            {% for h2 in h1.children %}
                                <option value="{{h2.permalink |
                                safe}}">&nbsp;&nbsp;&nbsp;&nbsp;{{ loop.index }}. {{ h2.title }}</option>
                            {% endfor %}
                        {% endif %}
                    {% endfor %}

                    {# Comments link #}
                    {% if page.extra.comments %}
                        <option disabled>──────────</option>
                        <option value="{{ current_url }}#comments">Comments</option>
                    {% endif %}
                </select>

                <script>
                    let select = document.getElementById("toc-select");
                    select.addEventListener('change', function(event) {
                        let target = event.target.value;
                        if(target != null && target != undefined && target != '') {
                            window.location.href = target;
                        }
                    });
                </script>
            </div>
        {%- endif %}

        <div itemprop="articleBody">
            {{ page.content | safe }}
        </div>

        {# Comment links #}
        {% if page.extra.comments %}
            <h2 id="comments">Comments</h2>
            <p>
                Comments on
                {% for page in page.extra.comments %}
                    <a href="{{ page.url | safe }}" target="_blank">{{ page.name }}</a>
                    {%- if not loop.last -%}
                        {% if loop.index == page.extra.comments | length - 1%}
                            &amp;
                        {% else -%}
                            ,
                        {% endif %}
                    {% endif %}
                {%- endfor -%}
                .
            </p>
        {% endif %}

        {# Applause button #}
        {% if page.extra.zenn_applause %}
            <div class="applause-wrapper">
                <applause-button color="#a6a28c" url="{{ page.permalink | safe }}"></applause-button>
            </div>
        {% endif %}
    </article>
{% endblock body %}

{% block page_footer %}
    <footer class="muted">
        <p>
            {% if config.extra.author %}
                Published by
                <a href="{{ get_url(path="@/about.md") | safe }}">{{ config.extra.author }}</a>
            {% endif %}
            {% if not page.draft %}
                {% if page.taxonomies.categories %}
                    {% set category = page.taxonomies.categories[0] %}
                    in <a href="{{ get_taxonomy_url(kind="categories", name=category) | safe }}">{{ category | title }}</a>
                {% endif %}
                {% if page.taxonomies.tags %}
                    and tagged
                    {% for tag in page.taxonomies.tags %}<a href="{{ get_taxonomy_url(kind="tags", name=tag) | safe }}" class="tag">{{ tag }}</a>{% endfor %}
                {% endif %}
            {% endif %}
        </p>
    </footer>
{% endblock page_footer %}
