{% extends 'base.html' %}

{% block head %}
<meta name="description" content="{{ blogBase['description'] }}">
<meta property="og:title" content="{{ blogBase['postTitle'] }}">
<meta property="og:description" content="{{ blogBase['description'] }}">
<meta property="og:type" content="article">
<meta property="og:url" content="{{ blogBase['postUrl'] }}">
<meta property="og:image" content="{{ blogBase['ogImage'] }}">
<title>{{ blogBase['postTitle'] }}</title>
{% if blogBase['highlight']==1 %}<link href="//unpkg.com/@wooorm/starry-night@2.1.1/style/both.css" rel="stylesheet" />{% endif %}
{{ blogBase['head'] }}
{% endblock %}

{% block style %}
<style>
.postTitle{margin: auto 0;font-size:40px;font-weight:bold;}
.title-right{display:flex;margin:auto 0 0 auto;}
.title-right .circle{padding: 14px 16px;margin-right:8px;}
#postBody{border-bottom: 1px solid var(--color-border-default);padding-bottom:36px;}
#postBody hr{height:2px;}
#cmButton{height:48px;margin-top:48px;}
#comments{margin-top:64px;}
.g-emoji{font-size:24px;}
@media (max-width: 600px) {
    body {padding: 8px;}
    .postTitle{font-size:24px;}
}
{% if blogBase['highlight']!=0 -%}
.copy-feedback {
    display: none;
    position: absolute;
    top: 10px;
    right: 50px;
    color: var(--color-fg-on-emphasis);
    background-color: var(--color-fg-muted);
    border-radius: 3px;
    padding: 5px 8px;
    font-size: 12px;
}{% endif %}
</style>
{{ blogBase['style'] }}

{% endblock %}
{% block header %}
<h1 class="postTitle">{{ blogBase['postTitle'] }}</h1>
<div class="title-right">
    <a href="{{ blogBase['homeUrl'] }}" id="buttonHome" class="btn btn-invisible circle" title="{{ i18n['home'] }}">
        <svg class="octicon" width="16" height="16">
            <path id="pathHome" fill-rule="evenodd"></path>
        </svg>
    </a>
    {% if blogBase['showPostSource']==1 %}
    <a href="{{ blogBase['postSourceUrl'] }}" target="_blank" class="btn btn-invisible circle" title="Issue">
        <svg class="octicon" width="16" height="16">
            <path id="pathIssue" fill-rule="evenodd"></path>
        </svg>
    </a>
    {% endif %}

    <a class="btn btn-invisible circle" onclick="modeSwitch();" title="{{ i18n['switchTheme'] }}" {%- if blogBase['themeMode']=='fix' -%}style="display:none;"{%- endif -%}>
        <svg class="octicon" width="16" height="16" >
            <path id="themeSwitch" fill-rule="evenodd"></path>
        </svg>
    </a>

</div>
{% endblock %}

{% block content %}
<div class="markdown-body" id="postBody">{{ blogBase['postBody'] }}</div>
<div style="font-size:small;margin-top:8px;float:right;">{{ blogBase['bottomText'] }}</div>
{% if blogBase['needComment']==1 %}
<button class="btn btn-block" type="button" onclick="openComments()" id="cmButton">{{ i18n['comments'] }}</button>
<div class="comments" id="comments"></div>
{% endif %}
{% endblock %}

{% block script %}
<script>
document.getElementById("pathHome").setAttribute("d",IconList["home"]);
{% if blogBase['showPostSource']==1 %}document.getElementById("pathIssue").setAttribute("d",IconList["github"]);{% endif %}
{% if blogBase['commentNum']>0 -%}
    cmButton=document.getElementById("cmButton");
    span=document.createElement("span");
    span.setAttribute("class","Counter");
    span.innerHTML="{{ blogBase['commentNum'] }}";
    cmButton.appendChild(span);
{%- endif %}

{% if blogBase['needComment']==1 %}
function openComments(){
    cm=document.getElementById("comments");
    cmButton=document.getElementById("cmButton");
    cmButton.innerHTML="loading";
    span=document.createElement("span");
    span.setAttribute("class","AnimatedEllipsis");
    cmButton.appendChild(span);

    script=document.createElement("script");
    script.setAttribute("src","https://utteranc.es/client.js");
    script.setAttribute("repo","{{ blogBase['repoName'] }}");
    script.setAttribute("issue-term","title");
    {% if blogBase['themeMode']=='manual' %}
    if(localStorage.getItem("meek_theme")=="dark"){script.setAttribute("theme","dark-blue");}
    else if(localStorage.getItem("meek_theme")=="light") {script.setAttribute("theme","github-light");}
    else{script.setAttribute("theme","preferred-color-scheme");}
    {% else %}
    script.setAttribute("theme","{{ blogBase['nightTheme'] }}");
    {% endif %}
    script.setAttribute("crossorigin","anonymous");
    script.setAttribute("async","");
    cm.appendChild(script);

    int=self.setInterval("iFrameLoading()",200);
}

function iFrameLoading(){
    var utterances=document.getElementsByClassName('utterances');
    if(utterances.length==1){
        if(utterances[0].style.height!=""){
            utterancesLoad=1;
            int=window.clearInterval(int);
            document.getElementById("cmButton").style.display="none";
            console.log("utterances Load OK");
        }
    }
}
{%- endif %}

{% if blogBase['highlight']!=0 -%}
document.addEventListener('DOMContentLoaded', () => {
    const createClipboardHTML = (codeContent, additionalClasses = '') => `
        <pre class="notranslate"><code class="notranslate">${codeContent}</code></pre>
        <div class="clipboard-container position-absolute right-0 top-0 ${additionalClasses}">
            <clipboard-copy class="ClipboardButton btn m-2 p-0" role="button" style="display: inherit;">
                <svg height="16" width="16" class="octicon octicon-copy m-2"><path d="${IconList["copy"]}"></path></svg>
                <svg height="16" width="16" class="octicon octicon-check color-fg-success m-2 d-none"><path d="${IconList["check"]}"></path></svg>
            </clipboard-copy>
            <div class="copy-feedback">Copied!</div>
        </div>
    `;

    const handleCodeElements = (selector = '') => {
        document.querySelectorAll(selector).forEach(codeElement => {
            const codeContent = codeElement.innerHTML;
            const newStructure = document.createElement('div');
            newStructure.className = 'snippet-clipboard-content position-relative overflow-auto';
            newStructure.innerHTML = createClipboardHTML(codeContent);

            const parentElement = codeElement.parentElement;
            if (selector.includes('highlight')) {
                parentElement.insertBefore(newStructure, codeElement.nextSibling);
                parentElement.removeChild(codeElement);
            } else {
                parentElement.parentElement.replaceChild(newStructure, parentElement);
            }
        });
    };

    handleCodeElements('pre.notranslate > code.notranslate');
    handleCodeElements('div.highlight > pre.notranslate');

    let currentFeedback = null;
    document.querySelectorAll('clipboard-copy').forEach(copyButton => {
        copyButton.addEventListener('click', () => {
            const codeContent = copyButton.closest('.snippet-clipboard-content').innerText;
            const tempTextArea = document.createElement('textarea');
            tempTextArea.value = codeContent;
            document.body.appendChild(tempTextArea);
            tempTextArea.select();
            document.execCommand('copy');
            document.body.removeChild(tempTextArea);

            const copyIcon = copyButton.querySelector('.octicon-copy');
            const checkIcon = copyButton.querySelector('.octicon-check');
            const copyFeedback = copyButton.nextElementSibling;

            if (currentFeedback && currentFeedback !== copyFeedback) {currentFeedback.style.display = 'none';}
            currentFeedback = copyFeedback;

            copyIcon.classList.add('d-none');
            checkIcon.classList.remove('d-none');
            copyFeedback.style.display = 'block';
            copyButton.style.borderColor = 'var(--color-success-fg)';

            setTimeout(() => {
                copyIcon.classList.remove('d-none');
                checkIcon.classList.add('d-none');
                copyFeedback.style.display = 'none';
                copyButton.style.borderColor = '';
            }, 2000);
        });
    });
});
{%- endif %}

</script>
{{ blogBase['script'] }}
{% endblock %}