{{ define "PageStyles" }}
<link rel="stylesheet" href="/public/styles/blog_article.css?v={{ .Version }}">
{{ end }}

{{ define "PageHead" }}
<meta property="og:type" content="article">
<meta property="og:title" content="{{ .Article.Title }}">
<meta property="og:image" content="{{ .Site.Host }}{{ .Article.BaseBanner }}">
<meta property="og:url" content="{{ .Site.Host }}/blog/{{ .Article.Slug }}">
<meta property="og:description" content="{{ .Article.Description }}">
{{ end }}

{{ define "PageBody" }}
<dialog class="layout-dialog">
    <div class="layout-modal effect-caution">

        <div class="modal-header">
            <p>Share</p>
            <form method="dialog" autofocus>
                <button>&#10005;</button>
            </form>
        </div>

        <div class="modal-content">
            <input type="text" value="{{ .Site.Host }}/blog/{{ .Article.Slug }}" onclick="this.select()" readonly>
            <a title="Share on X" target="_blank" href="https://twitter.com/intent/tweet?url={{ .Site.Host }}/blog/{{ .Article.Slug }}&text={{ .Article.Title }}&via={{ .Site.Owner }}">
                {{ template "logo_x.svg" . }}
            </a>
            <a title="Share on Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{ .Site.Host }}/blog/{{ .Article.Slug }}">
                {{ template "logo_facebook.svg" . }}
            </a>
            <a title="Share on LinkedIn" target="_blank" href="https://www.linkedin.com/shareArticle?url={{ .Site.Host }}/blog/{{ .Article.Slug }}">
                {{ template "logo_linkedin.svg" . }}
            </a>
        </div>

    </div>
</dialog>
<script src="/public/scripts/blog_article.js?v={{ .Version }}"></script>
{{ end }}

{{ define "NavContent" }}
<div class="article-actions">
    <a title="Visit Homepage" href="/blog">
        {{ template "icon_home.svg" . }}
    </a>
    <a title="Return To Top" href="#" class="mobile-hide">
        {{ template "icon_top.svg" . }}
    </a>
    <a title="Share Article" href="{{ .Site.Host }}/blog/{{ .Article.Slug }}" id="button-share">
        {{ template "icon_share.svg" . }}
    </a>
</div>

<div class="article-chapters">
    <!-- To Be Generated by Article Script -->
</div>
{{ end }}

{{ define "PageContent" }}
<h1 id="#" hidden><!-- Top Anchor --></h1>

<div class="article-header">
    <img class="header-banner" alt="Article Banner" src="/public/articles/{{ .Article.BaseResources }}/{{ .Article.BaseBanner }}?v={{ $.Version }}">
    <p class="header-title effect-docked">{{ .Article.Title }}</p>
    <div class="header-chevrons">
        <div class="effect-chevron-container header-about">
            <span class="effect-chevron-point-right">{{ .Article.Author }}</span>
            <span class="effect-chevron-point-right">{{ .Article.Date.Format "Jan 02 2006" }}</span>
        </div>
        <div class="effect-chevron-container header-tags">
            {{ range .Article.Tags }}
            <span class="effect-chevron-point-left">{{ . }}</span>
            {{ end }}
        </div>
    </div>
</div>

<div class="article-content">
    {{ block "ArticleContent" . }}{{ end }}
</div>
{{ end }}