<% let postPage = (page['layout'] === 'post' || page._isNotePagination || page['layout'] === 'note') ? true : false; %>
<header class="<% if (is_home()){ %>home bg-blue-500 dark:bg-slate-800<% } %>">
    <div class="max-container z-10">
        <div class="flex flex-row justify-between md:justify-start items-center py-3">
            <%- partial('index/logo', {icon: true}) %>
            <div class="md:ml-auto flex flex-wrap items-center text-base justify-center">
                <button id="mysearch-trigger" type="button"
                        class="fadeIn inline-flex h-8 items-center bg-slate-200 dark:bg-gray-900 md:dark:bg-transparent md:bg-transparent rounded-full px-2 md:px-3 lg:px-6 py-2 <%- is_home() ? "text-white" : "text-slate-700"  %>  md:hover:opacity-80">
                    <div class="md:text-xl text-slate-700 dark:text-slate-300 <%- is_home() ? "md:text-white" : "" %> md:mr-2">
                        <%- icon("search") %>
                    </div>
                    <span class="hidden md:inline dark:text-slate-300">Search for cheatsheet</span>
                    <span class="hidden md:inline dark:text-slate-300 md:ml-2 text-sm leading-5 py-0.5 px-1.5 border <%- postPage ? "border-slate-400" : "border-slate-300" %> rounded-md">
                        <span class="font-sans">âŒ˜</span>
                        <span class="font-sans">K</span>
                    </span>
                </button>
                <a href="<%- edit_page() %>" target="_blank">
                    <img alt="GitHub Repo stars" style="height: 26px; opacity: 0.8;" src="https://img.shields.io/github/stars/Fechin/reference?style=social">
                </a>
                <a href="https://twitter.com/FechinLi" target="_blank">
                    <button type="button"
                            class="fadeIn inline-flex h-8 items-center rounded-full  bg-[#4d9feb] text-slate-100 ml-1 lg:ml-4 px-2 md:px-3 py-2 md:hover:opacity-80">
                        <div class="md:mr-2">
                            <%- icon("twitter") %>
                        </div>
                        <span class="hidden md:inline text-sm">Follow Me</span>
                    </button>
                </a>
                <button id="darkMode" class="fadeIn inline-flex items-center justify-center flex-shrink-0 h-8 w-8 rounded-full text-gray-900 ml-1 lg:ml-4 dark:text-gray-300 bg-gray-200 dark:bg-gray-900">
                    <i class="icon-light text-gray-600 dark:text-gray-300 dark:hover:text-white">
                        <%- icon("light") %>
                    </i>
                </button>
                <a href="<%- share_link("facebook") %>" target="_blank">
                    <button type="button"
                            class="fadeIn inline-flex h-8 w-8 justify-center items-center rounded-full bg-[#4a66ad] text-slate-100 ml-1 lg:ml-4 px-2 md:px-3 py-2 md:hover:opacity-80">
                        <span class="text-md">
                            <%- icon("facebook") %>
                        </span>
                        <span class="hidden">Facebook</span>
                    </button>
                </a>
                <a href="<%- share_link("twitter") %>" target="_blank">
                    <button type="button"
                            class="fadeIn inline-flex h-8 w-8 justify-center items-center rounded-full bg-[#4d9feb] text-slate-100 ml-1 lg:ml-4 px-2 md:px-3 py-2 md:hover:opacity-80">
                        <span class="text-md">
                            <%- icon("twitter") %>
                        </span>
                        <span class="hidden">Twitter</span>
                    </button>
                </a>
            </div>
        </div>
    </div>
</header>