{% extends 'base.html' %}

{% block head %}
<title>{{ blogBase['postTitle'] }}</title>
<link href="//unpkg.com/@wooorm/starry-night@2.1.1/style/both.css" rel="stylesheet" />
{% endblock %}

{% block style %}
<style>
h1 a:not([href]){color:inherit;text-decoration:none;vertical-align: bottom;font-size:40px;}
.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: 767px) {body {padding: 8px;}}
</style>
{{ blogBase['style'] }}

{% endblock %}
{% block header %}
<h1>
    <a>{{ blogBase['postTitle'] }}</a>
</h1>
<div class="title-right">

    <a href="/"><button id="buttonHome" class="btn btn-invisible circle" title="{{ i18n['home'] }}">
        <svg class="octicon" width="16" height="16">
            <path id="pathHome" fill-rule="evenodd" d="{{ IconList['home'] }}"></path>
        </svg>
    </button></a>

    <a href="{{ blogBase['postSourceUrl'] }}" target="_blank"><button class="btn btn-invisible circle" title="Issue">
        <svg class="octicon" width="16" height="16">
            <path id="pathIssue" fill-rule="evenodd" d="{{ IconList['github'] }}"></path>
        </svg>
    </button></a>

    <button class="btn btn-invisible circle" onclick="modeSwitch();" title="{{ i18n['switchTheme'] }}">
        <svg class="octicon" width="16" height="16" >
            <path id="themeSwitch" fill-rule="evenodd"></path>
        </svg>
    </button>

</div>
{% endblock %}

{% block content %}
<div class="markdown-body" id="postBody">
{{ blogBase['postBody'] }}
</div>
<button class="btn btn-block" type="button" onclick="openComments()" id="cmButton">{{ i18n['comments'] }}</button>
<div class="comments" id="comments"></div>
{% endblock %}

{% block script %}
<script>

{% if blogBase['commentNum']>0 -%}
    cmButton=document.getElementById("cmButton");
    span=document.createElement("span");
    span.setAttribute("class","Counter");
    span.innerHTML="{{ blogBase['commentNum'] }}";
    cmButton.appendChild(span);
{%- endif %}

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(localStorage.getItem("meek_theme")=="dark"){script.setAttribute("theme","dark-blue");}
    else{script.setAttribute("theme","github-light");}
    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");
        }
    }
}

</script>

{{ blogBase['script'] }}

{% endblock %}