{{ define "meta_tags" }}
<meta property="og:title" content="{{site.Title}}{{if not .IsHome}} | {{.Title}}{{end}}" />
{{ partial "seo/print.html" . }}

{{- with .Site.Params.facebookAppId }}
<meta property="fb:app_id" content="{{ . }}" />
{{- end }}
<meta name="twitter:title" content="{{ .Title }}">
<link rel="preload" href='{{ "/css/sweetalert2.min.css" | relURL }}' as="style"
    onload="this.onload=null;this.rel='stylesheet'">
{{ end }}
{{ define "main" }}
<div class="mx-auto my-10 max-w-6xl">
    <div class="mx-3 col-span-3 lg:col-span-2 px-2">
        <h1 class="title text-5xl font-bold mb-3">{{.Title}}</h1>
        <section class="mb-4 text-lg">
            <h4 id="date" class="flex flex-row items-center"><span class="icon-access_time text-2xl mr-2"></span>
                {{ .Date.Format "2006/01/02" }} </h4>
            {{ if .Params.author }}
            <h4 class="flex flex-row items-center"><span class="icon-person text-2xl mr-2"></span>{{.Params.author}}
            </h4>
            {{ end }}
            {{ with .Params.categories }}
            <div id="categories" class="flex flex-row items-center">
                <span class="icon-folder text-2xl mr-1"></span>
                {{ range . }}
                <span
                    class="inline-flex py-1 leading-4 content-center justify-center px-1 text-blue-600 hover:text-blue-800 duration-200"><a
                        href='{{ "categories" | absURL}}/{{ . | urlize }}'>{{ . }}</a></span>
                {{ end }}
            </div>
            {{ end }}
        </section>
        {{ if .Params.image }}
        <img class="my-4" src="{{ .Params.image | absURL }}">
        {{ end }}
        <div class="content prose md:prose-lg lg:prose-xl max-w-none py-1">{{.Content}}</div>
        <div class="share m-2 grid grid-cols-2 lg:grid-cols-3 gap-2">
            <a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}" target="_blank"
                title="Tweet" class="share-button twitter">
                <div class="text-white text-center">
                    <span class="icon-twitter text-lg mr-2"></span>Twitter
                </div>
            </a>
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}&t={{ .Title }}" target="_blank"
                title="Facebook" class="share-button facebook">
                <div class="text-white text-center">
                    <span class="icon-facebook text-lg mr-2"></span>Facebook
                </div>
            </a>
            <a href="https://b.hatena.ne.jp/add?mode=confirm&url={{ .Permalink }}&title={{ .Title }}" target="_blank"
                title="hatena" class="share-button hatena">
                <div class="text-white text-center">
                    <span class="icon-hatenabookmark text-lg mr-2"></span>Hatena
                </div>
            </a>
            <a href="https://getpocket.com/edit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="pocket"
                class="share-button pocket">
                <div class="text-white text-center">
                    <span class="icon-get-pocket text-lg mr-2"></span>Pocket
                </div>
            </a>
            <a href="https://timeline.line.me/social-plugin/share?url={{ .Permalink }}" class="share-button line">
                <div class="text-white text-center">
                    <span class="icon-line text-lg mr-2"></span>LINE
                </div>
            </a>
            <a href="javascript:OnClickURL();" class="share-button url" title="Copy to Clipboard"
                data-clipboard-text="{{ .Title }} {{ .Permalink }}" id="url">
                <div class="text-white text-center">
                    <span class="icon-link text-lg mr-2"></span>Copy
                </div>
            </a>
        </div>
        <hr class="py-4">
        {{- with .Site.Params.disqusShortname }}
        <div class="mb-3">
            {{ template "_internal/disqus.html" . }}
        </div>
        <hr class="py-4">
        {{ end }}
        <aside id="meta">
            <div class="grid grid-cols-2">
                <div class="col-span-1">
                    {{ with .PrevInSection }}
                    <a class="previous lg:text-2xl" href="{{.Permalink}}">
                        <div
                            class="transition-colors duration-300 border border-gray-600 hover:border-black h-auto m-3 text-center py-3 lg:py-1">
                            <span class="icon-keyboard_arrow_left"></span> {{.Title}}
                        </div>
                    </a>
                    {{ end }}
                </div>
                {{ with .NextInSection }}
                <a class="next lg:text-2xl" href="{{.Permalink}}">
                    <div
                        class="transition-colors duration-300 col-span-1 border border-gray-600 hover:border-black h-auto m-3 text-center py-3 lg:py-1">
                        {{.Title}} <span class="icon-keyboard_arrow_right"></span>
                    </div>
                </a>
                {{ end }}
            </div>
        </aside>
    </div>
</div>
{{ end }}