{{define "title"}}{{.Post.Title}}{{end}}

{{define "metadata"}}
<meta property="og:title" content="{{.Post.Title}}" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://coffey.dad{{.Post.HeaderImage.Location}}" />
<meta property="og:image:secure_url" content="https://coffey.dad{{.Post.HeaderImage.Location}}" />
<meta property="og:image:type" content="{{.Post.HeaderImage.Mime}}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://coffey.dad/blog/post/{{.Post.URL}}" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@queueueue_" />
<meta name="twitter:title" content="{{.Post.Title}}" />
<meta name="twitter:description" content="{{.Post.Description}}" />
<meta name="twitter:image" content="https://coffey.dad{{.Post.HeaderImage.Location}}" />
{{end}}

{{define "scripts"}}
<link rel="stylesheet" href="/static/css/post.css">
<script src="/static/js/pltags.js"></script>
{{end}}

{{define "main"}}
<div>
  <a class="button ml-5 is-info is-soft" href="/blog"><i class="pr-1" data-feather="arrow-left-circle"></i> Back to all
    posts</a>
  <div class="container px-5">
    <div class="columns">
      <div class="column is-two-thirds-desktop is-offset-2-desktop is-10-tablet is-offset-1-tablet">
        <div class="box p-0 is-clipped">
          <figure class="image">
            <img src="{{.Post.HeaderImage.Location}}" alt="Header image, not needed to understand the article" />
          </figure>
        </div>
        <div class="columns">
          <div class="column">
            <h1 class="title is-1 is-italic">{{.Post.Title}}</h1>
          </div>
          <div class="column is-narrow">
            {{if .IsAuthenticated}}
            <a class="button mt-2" href="/blog/edit/{{.Post.ID}}">Edit Post</a>
            {{end}}
          </div>
        </div>
        <p class="is-italic has-text-weight-light">
          Posted {{humanDate .Post.Created}}
          {{if (ne .Post.Modified .Post.Created)}}
          <br>
          Edited &nbsp;{{humanDate .Post.Modified}}
          {{end}}
        </p>
        <div class="field is-grouped is-grouped-multiline py-2">
          <div class="control">
            <p class="has-text-weight-light">Tags:</p>
          </div>
          {{range .Post.Tags}}
          <div class="control">
            <a href="/blog?filter={{pathEscape .Name}}" class="tag {{.Color}} post-tag">{{.Name}}</a>
          </div>
          {{end}}
        </div>
        <hr>
      </div>
    </div>
    <div class="columns">
      {{with .Post}}
      <div class="column is-two-thirds-desktop is-offset-2-desktop is-10-tablet is-offset-1-tablet">
        <div class="content pb-6">
          {{.Body}}
        </div>
      </div>
      {{end}}
    </div>
  </div>
</div>
{{end}}