{% extends "base.html" %}
{% set has_right = True %}
{% block html_lang %}{{ article.lang }}{% endblock html_lang %}
{% block title %}
    {{ article.title|striptags|e }}
{% endblock title %}
{% block head %}
    {% import 'translations.html' as translations with context %}
    {{ translations.entry_hreflang(article) }}
    {% if article.tags %}
        <meta name="keywords"
              content="{{ article.tags|join(', ', attribute='name') |e }}">
    {% endif %}
{% endblock head %}
{% block meta_description %}
    {{ m.render_meta_description(article) }}
{% endblock meta_description %}
{% block top_center %}
    <h1>
        <a href="{{ SITEURL }}/{{ article.url }}"
           rel="bookmark"
           title="Permalink to {{ article.title|striptags|e }}">{{ article.title }}</a>
    </h1>
{% endblock top_center %}
{% block right_sidebar %}
    <ul class="list-group list-group-flush">
        <li class="list-group-item">
            {# Spelled out rather than rendered through render_published_date, whose
            markup this otherwise matches: the label here is an icon plus text, and the
            sidebar entries carry no .published class. See macros.html for why <time>. #}
            <time datetime="{{ article.date.isoformat() }}"
                  title="{{ article.date.isoformat() }}">
                <i class="bi bi-calendar-event-fill"></i>
                {{ article.locale_date }}
            </time>
        </li>
        {% if article.modified %}
            <li class="list-group-item">
                <time datetime="{{ article.modified.isoformat() }}"
                      title="{{ article.modified.isoformat() }}">
                    <i class="bi bi-clock-history"></i>
                    Updated {{ article.locale_modified }}
                </time>
            </li>
        {% endif %}
        {% if AUTHOR_SAVE_AS and article.authors %}
            <li class="list-group-item">
                <address>
                    <i class="bi bi-person-circle"></i> By
                    {% for author in article.authors %}
                        <a href="{{ SITEURL }}/{{ author.url }}" rel="author">{{ author.name }}</a>
                    {% endfor %}
                </address>
            </li>
        {% endif %}
        {% if article.category or article.tags %}
            <li class="list-group-item">
                <ul class="list-inline">
                    {% if article.category %}
                        {% for category, articles in categories %}
                            {% if category.url == article.category.url %}
                                <li class="list-inline-item">{{ m.render_tag(category, counter=articles|length() , kind='category') }}</li>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                    {% if article.tags %}
                        {% set article_tags = [] %}
                        {% for tag, articles in tags %}
                            {% for t in article.tags %}
                                {% if tag.url == t.url %}
                                    {% if article_tags.append({'name': tag.name, 'url': tag.url, 'articles': articles|length()}) %}{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                        {# Sort by tag frequency, then alphabetically #}
                        {% for tag in article_tags|sort(attribute='name')|sort(reverse=True, attribute='articles') %}
                            {# The count comes off the entry, not from `articles`: the loop
                            binding that name closed above, so out here it resolves to the
                            site-wide article list and every tooltip reports the same total. #}
                            <li class="list-inline-item">{{ m.render_tag(tag, counter=tag.articles) }}</li>
                        {% endfor %}
                    {% endif %}
                </ul>
            </li>
        {% endif %}
        {% if ARTICLE_EDIT_LINK %}
            <li class="list-group-item">
                Found a typo? Fix it now:
                <br />
                <a href="{{ ARTICLE_EDIT_LINK % {'slug': article.slug} }}">
                    <i class="bi bi-pencil-square"></i> Edit article on GitHub</a>
            </li>
        {% endif %}
        {% if article.prev_article or article.next_article %}
            <li class="list-group-item">
                <nav class="nav nav-underline nav-justified">
                    <a class="nav-link {% if not article.prev_article %}disabled{% endif %}"
                       {% if article.prev_article %} href="{{ SITEURL }}/{{ article.prev_article.url }}" title="{{ article.prev_article.title|striptags|e }}" {% endif %}
                       rel="prev">
                        <span aria-hidden="true">←</span> Older
                    </a>
                    <a class="nav-link {% if not article.next_article %}disabled{% endif %}"
                       {% if article.next_article %} href="{{ SITEURL }}/{{ article.next_article.url }}" title="{{ article.next_article.title|striptags|e }}" {% endif %}
                       rel="next">
                        Newer <span aria-hidden="true">→</span>
                    </a>
                </nav>
            </li>
        {% endif %}
    </ul>
{% endblock right_sidebar %}
{% block content %}
    {% import 'translations.html' as translations with context %}
    {{ translations.translations_for(article) }}
    {{ article.content }}
    {# Fetch content related to the current article from either related-posts
    or similar-posts plugin. The latter takes precedence as it produces more
    robust results. #}
    {% set related = None %}
    {% if article.similar_posts %}
        {% set related = article.similar_posts %}
    {% elif article.related_posts %}
        {% set related = article.related_posts %}
    {% endif %}
    {% if related %}
        <h3 class="mt-3">Related content</h3>
        {# TODO: Use fancier related layout with images, as in:
        https://kevin.deldycke.com/2012/04/beautify-contextual-related-posts-wordpress-plugin/ #}
        <div class="list-group bg-body-tertiary">
            {% for related_post in related %}
                <a class="list-group-item list-group-item-action"
                   href="{{ SITEURL }}/{{ related_post.url }}">
                    <div class="d-flex w-100 justify-content-between">
                        <h5>{{ related_post.title }}</h5>
                        <time class="small published"
                              datetime="{{ related_post.date.isoformat() }}"
                              title="{{ related_post.date.isoformat() }}">
                            {{ related_post.date.strftime("%Y") }}
                        </time>
                    </div>
                    <small>{{ related_post.summary|striptags|e }}</small>
                </a>
            {% endfor %}
        </div>
    {% endif %}
    {% if DISQUS_SITENAME and SITEURL and article.status != "draft" %}
        <div class="comments mt-5">
            <div id="disqus_thread"></div>
            <script>
                var disqus_config = function() {
                    this.page.url = "{{ SITEURL }}/{{ article.url }}";
                    this.page.identifier = "{{ article.url }}";
                };
                (function() {
                    var d = document,
                        s = d.createElement('script');
                    s.src = 'https://{{ DISQUS_SITENAME }}.disqus.com/embed.js';
                    s.setAttribute('data-timestamp', +new Date());
                    (d.head || d.body).appendChild(s);
                })();
            </script>
            <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus</a>.</noscript>
        </div>
    {% endif %}
{% endblock content %}