{% extends "layout.html" %}
{% block body %}

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="article_title">{{ title }}</h1>
            <div class="article_meta">
                <span class="article_slug">Slug: <code>{{ goatcounter_path }}</code></span>
                <span class="article_views">
                    阅读:
                    {% if goatcounter_enabled %}
                    <span class="goatcounter-stat" data-goatcounter-path="{{ goatcounter_path }}">读取中</span>
                    {% else %}
                    <span>未知</span>
                    {% endif %}
                </span>
            </div>
            <div class="tags_container">
                {% if tags %}
                <span>标签:</span>
                {% for tag in tags %}
                <a class="tag" href="{{ static_path }}tags/tag_{{ tag }}.html">{{ tag }}</a>
                {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="post_content col-lg-10 col-md-10 col-xs-10 col-md-10">
            {{ post_content }}
        </div>
        <div class="mytoc col-lg-2 col-md-2 col-xs-2 col-md-2">
            <span class="toc_title">目录</span>
            {{ toc }}
        </div>
    </div>
    <div class="row">
        <script src="https://utteranc.es/client.js"
        repo="drunkpig/drunkpig.github.io"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
        </script>
    </div>
</div>

{% if goatcounter_enabled %}
<script>
    (function () {
        var counters = document.querySelectorAll(".goatcounter-stat[data-goatcounter-path]");
        var goatScript = document.querySelector("script[data-goatcounter]");
        var goatEndpoint = goatScript ? goatScript.getAttribute("data-goatcounter") : "";
        if (!counters.length || !goatEndpoint) {
            return;
        }
        var counterBase = goatEndpoint.replace(/\/count\/?$/, "");
        var goatPath = "";
        if (window.goatcounter && typeof window.goatcounter.get_data === "function") {
            var goatData = window.goatcounter.get_data();
            goatPath = goatData && goatData.p ? goatData.p : "";
        }

        counters.forEach(function (node) {
            var path = goatPath || node.getAttribute("data-goatcounter-path");
            if (!path) {
                node.textContent = "未知";
                console.warn("[mdwiki] GoatCounter detail path is empty");
                return;
            }

            var normalizedPath = path.charAt(0) === "/" ? path : "/" + path;
            var endpoint = counterBase + "/counter/" + encodeURI(normalizedPath) + ".json";
            fetch(endpoint).then(function (response) {
                if (!response.ok) {
                    throw new Error("request failed: " + response.status + " " + endpoint);
                }
                return response.json();
            }).then(function (data) {
                node.textContent = data.count || 0;
            }).catch(function (error) {
                console.warn("[mdwiki] GoatCounter detail counter failed", error);
                node.textContent = "未知";
            });
        });
    })();
</script>
{% endif %}

{% endblock %}