{% extends 'base.html' %}
{% block head %}
<meta name="description" content="{{ blogBase['title'] }} search page">
<title>{{ blogBase['title'] }} - Tag</title>
{% endblock %}

{% block style %}
<style>
.tagTitle{margin:auto 0;font-size:40px;font-weight:bold;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.title-right{display:flex;margin:auto 0 0 auto;}
.title-right .circle{padding: 14px 16px;margin-right:8px;}

.subnav-search{width:222px;margin-top:8px;margin-right:8px;}
.subnav-search-input{width:160px;border-top-right-radius:0px;border-bottom-right-radius:0px;}
.subnav-search button{padding:5px 8px;border-top-left-radius:0px;border-bottom-left-radius:0px;}

.SideNav-icon{margin-right: 16px}
.Label{color: #fff;margin-left:8px;}
.genTime{float: right;}
.d-flex{min-width:0;}
.listTitle{overflow:hidden;white-space:nowrap;text-overflow: ellipsis;max-width: 100%;}
.listLabels{white-space:nowrap;}

@media (max-width: 600px) {
    body { padding: 8px;}
    .tagTitle{display:none;}
    .LabelTime{display:none;}
}
</style>
{% endblock %}

{% block header %}
<span class="tagTitle"><span>Loading</span><span class="AnimatedEllipsis"></span></span>
<div class="title-right">
    <div class="subnav-search">
        <input type="search" class="form-control subnav-search-input float-left" aria-label="Search site" value="" style="height:32px;">
        <button class="btn float-left" type="submit" onclick="javascript:searchShow()">{{ i18n['Search'] }}</button>
        <svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
            <path id="searchSVG" fill-rule="evenodd" d=""></path>
        </svg>
    </div>
    <a href="{{ blogBase['homeUrl'] }}"><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>
    <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 id="tagLable" style="margin-bottom: 16px;"></div>
<nav class="SideNav"></nav>
<div class="notFind" style="display:none;font-size:24px;margin:8px;">Not Find</div>
{% endblock %}

{% block script %}
<script>
document.getElementById("searchSVG").setAttribute("d",IconList["search"]);

tagList=[];
jsonData='';
let requestJson="postList.json"
let request=new XMLHttpRequest();
request.open("GET",requestJson);
request.responseType='text';
request.send();
request.onload=function(){
    jsonData=JSON.parse(request.response);
    console.log(jsonData);
    showList();
    setClassDisplay(decodeURI(window.location.hash.slice(1)));
}

function showList(){
    let SideNav=document.getElementsByClassName("SideNav")[0];
    SideNav.setAttribute("class","SideNav border");
    let tagLable=document.getElementById("tagLable");

    if(tagList.length==0){
        let showLabels=document.createElement("button");
        showLabels.setAttribute("class","Label");
        showLabels.setAttribute("style","background-color:#000");
        showLabels.innerHTML="All";
        showLabels.setAttribute("onclick","javascript:updateShowTag('All');");
        tagLable.appendChild(showLabels);
    }
    for(i in jsonData){
        if(!(tagList.includes(jsonData[i]['label']))){
            tagList.push(jsonData[i]['label']);
            let showLabels=document.createElement("button");
            showLabels.setAttribute("class","Label");
            showLabels.setAttribute("style","background-color:"+jsonData[i]['labelColor']);
            showLabels.innerHTML=jsonData[i]['label'];
            showLabels.setAttribute("onclick","javascript:updateShowTag('"+jsonData[i]['label']+"');");
            tagLable.appendChild(showLabels);
        }

        let div=document.createElement("div");
        div.setAttribute("class","lists "+jsonData[i]['label']);
        let item=document.createElement("a");
        item.setAttribute("class","SideNav-item d-flex flex-items-center flex-justify-between");
        item.setAttribute("href",jsonData[i]['postUrl']);

        let center=document.createElement("div");
        center.setAttribute("class","d-flex flex-items-center");

        svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
        path=document.createElementNS("http://www.w3.org/2000/svg","path"); 
        span=document.createElement("span");
        svg.setAttributeNS(null,"class","SideNav-icon octicon");
        svg.setAttributeNS(null,"style","witdh:16px;height:16px");
        path.setAttributeNS(null, "d", IconList["post"]);
        svg.appendChild(path);

        let title=document.createElement("span");
        title.setAttribute("class","listTitle");
        title.innerHTML=jsonData[i]['postTitle'];
        center.appendChild(svg);
        center.appendChild(title);

        let listLabels=document.createElement("div");
        listLabels.setAttribute("class","listLabels");
        let LabelName=document.createElement("span");
        LabelName.setAttribute("class","Label LabelName");
        LabelName.setAttribute("style","background-color:"+jsonData[i]['labelColor']);
        LabelName.innerHTML=jsonData[i]['label'];
        listLabels.appendChild(LabelName);
        let LabelTime=document.createElement("span");
        LabelTime.setAttribute("class","Label LabelTime");
        LabelTime.setAttribute("style","background-color:"+jsonData[i]['dateLabelColor']);
        LabelTime.innerHTML=jsonData[i]['createdDate'];
        listLabels.appendChild(LabelTime);

        item.appendChild(center);
        item.appendChild(listLabels);
        div.appendChild(item);
        SideNav.appendChild(div);
    }
}

function updateShowTag(label){
    if(window.location.hash.slice(1)!=encodeURI(label)){
        window.location.hash="#"+(label);
        setClassDisplay(label);
    }
}

function setClassDisplay(lable){
    let lists = document.getElementsByClassName("lists");
    let tagTitle = document.getElementsByClassName("tagTitle")[0];
    tagTitle.innerHTML="Tag #"+lable;
    document.title=lable+" - {{ blogBase['title'] }}";
    document.getElementsByClassName("subnav-search-input")[0].value='';
    if(lable=="All"){
        for(let i = 0; i < lists.length; i++){lists[i].style.display='block';}
        document.getElementsByClassName("notFind")[0].style.display='none';
    }
    else if(tagList.indexOf(lable)!=-1){
        for(let i = 0; i < lists.length; i++){
            lists[i].style.display='none';
        }

        let lables = document.getElementsByClassName(lable);
        for(let i = 0; i < lables.length; i++){
            lables[i].style.display='block';
        }
        document.getElementsByClassName("notFind")[0].style.display='none';
    }
    else{
        document.getElementsByClassName("subnav-search-input")[0].value=lable;
        searchShow();
    }
}

function searchShow(){
    let lists = document.getElementsByClassName("lists");
    let tagTitle = document.getElementsByClassName("tagTitle")[0];
    let searchInput = document.getElementsByClassName("subnav-search-input")[0].value;
    tagTitle.innerHTML="Search #"+searchInput;
    if(searchInput==''){document.title="Search - {{ blogBase['title'] }}";}
    else{document.title=searchInput+" - {{ blogBase['title'] }}";}
    let a=0;
    window.location.hash="#"+(searchInput);
    for(let i = 0; i < lists.length; i++){
        if(lists[i].childNodes[0].childNodes[0].childNodes[1].innerHTML.toUpperCase().indexOf(searchInput.toUpperCase())==-1){lists[i].style.display='none';}
        else{lists[i].style.display='block';a=a+1;}
    }
    if(a==0){
        let notFind=document.getElementsByClassName("notFind")[0];
        notFind.style.display='block';
        notFind.innerHTML='Not Find "'+searchInput+'"';
    }
    else{document.getElementsByClassName("notFind")[0].style.display='none';}
}

</script>
{% endblock %}