{% extends "base.html" %}

{% block content %}
<article class="post">
    <div class="post-title">
        <h1 class="title">{{ page.title }}</h1>
    </div>
    <div class="post-content">
        {{ page.content | safe }}
    </div>
    {{ <post_meta post={page} chinese_date={config.extra.seje_chinese_date} expand={true} /> }}
</article>

<div class="prev_next">
<nav id="prev_next">
    <div class="prev">
        {% if page.later %}
        <p>{{ trans(key="newer") }}<</p><a href="{{ page.later.permalink }}"><div class="article-nav-title">{{ page.later.title }}</div></a>
        {% endif %}
    </div>
    <div class="next">
        {% if page.earlier %}
        <p>{{ trans(key="older") }}</p><a href="{{ page.earlier.permalink }}"><div class="article-nav-title">{{ page.earlier.title }}</div></a>
        {% endif %}
    </div>
</nav>
</div>

<div class="post-comment">
{# Discussion #}
{% block comment %}
{% if config.seje_disqus_shortname %}
<section id="comments">
    <div id="disqus_thread"></div>
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = "{{ config.seje_disqus_shortname }}"; // required: replace example with your forum shortname
        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function () {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered
            by Disqus.</a></noscript>
</section>
{% endif %}
{% endblock %}
</div>

{% if page.extra.enable_img_caption %}
<script>
    const images = document.querySelectorAll(".post-content img");
    images.forEach((img) => {
        if (img.alt && img.alt.trim() !== "") {
            const caption = document.createElement("div");
            caption.className = "img-caption";
            caption.textContent = img.alt;

            let insertionPoint = img;
            if (img.parentElement.tagName === "A") {
                insertionPoint = img.parentElement;
            }

            insertionPoint.parentNode.insertBefore(
                caption,
                insertionPoint.nextSibling,
            );
        }
    });
</script>
{% endif %}

{% endblock %}