{{ define "main" }}
<div id="line-scroll" class="line-scroll">
</div>
<main class="content-page container-fluid pt-7 pb-5">
    {{ $page := . }}
    <div class="row justify-content-around">
        <div class="col-lg-7" style="background-color: white;">
            {{- with .Resources.Match "images/banner.svg" -}}
            {{ range . }}
            <div class="row justify-content-center mb-3">
                <div class="col-lg-10">
                    <img data-src="{{ .RelPermalink }}" class="img-fluid rounded mx-auto d-block mt-3" alt="{{ $page.Title }}" data-aos="zoom-in">
                </div>
            </div>
            {{- end -}}
            {{- end -}}
            <article>
                <div class="row justify-content-center">
                    <div class="col-lg-9">
                        <h1 class="display-3">{{ $page.Title }}</h1>

                        <div class="d-flex justify-content-between  align-items-stretch post-info">
                            <div>{{ partial "authors.html" $page }}</div>
                            <div class="meta text-muted mb-3 d-flex flex-column justify-content-start">
                                <div>
                                    <p class="text-muted">Posted on</p>
                                </div>
                                <div>
                                    <p class="created text-muted text-uppercase font-weight-bold mb-1">{{ $page.Date.Format "January 2, 2006" }}</p>
                                    <span class="mr-2"><i class="fas fa-book-open mr-2"></i>{{ $page.WordCount }} words</span>
                                    <span><i class="fas fa-clock mr-2"></i>{{ $page.ReadingTime }} min read</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                {{- with $page.Params.tags -}}
                <div class="row justify-content-center">
                    <div class="col-lg-9">
                        <div class="tags my-3">
                            {{- range . -}}
                            <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/">
                                <i class="fas fa-tag mr-2"></i>{{ . }}
                            </a>
                            {{- end -}}
                        </div>
                    </div>
                </div>
                {{- end -}}
                <div class="row justify-content-center">
                    <div class="col-lg-9">
                        <div class="content">
                            {{ $page.Content }}
                        </div>

                        {{ partial "sharer.html" . }}
                    </div>
                </div>

                {{- if .Site.Params.commento.enable -}}
                <div class="row justify-content-center my-3">
                    <div class="col-lg-8">
                        <div id="commento"></div>
                        <script src="{{ .Site.Params.commento.url }}"></script>
                    </div>
                </div>
                {{- end -}}

            </article>
        </div>
        <div class="col-lg-2" style="background-color: white;">
            <div class="sticky-top" style="top: 56px;">
                <p class="text-uppercase text-muted pt-2">On this page</p>
                <div class="toc-contents">
                    {{ .TableOfContents }}
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-9">
            {{ partial "related.html" $page }}
        </div>
        {{/*  <div id="" class="col-lg-2 toc-sidebar d-none d-md-block">
            <aside>
                <h5 class="text-center text-uppercase">Table of contents</h5>
                <div class="toc-contents">
                    {{ .TableOfContents }}
    </div>
    </aside>
    <div class="d-flex justify-content-center">
        <img src="/images/icons/Wizard.png" style="width: 50%;" />
    </div>
    </div> */}}
    </div>

</main>
{{ end }}