{{define "head"}}
<title>{{.Title}} - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">

<meta name="description" content="{{.Description}}">

<meta property="og:title" content="{{.Title}}">
<meta property="og:type" content="article">
<meta property="og:url" content="www.arimelody.me/blog/{{.Date.Year}}/{{.GetMonth}}/{{.TitleNormalised}}">
<meta property="og:image" content="https://www.arimelody.me/img/favicon.png">
<meta property="og:site_name" content="ari melody">
<meta property="og:description" content="{{.Description}}">

<link rel="stylesheet" href="/style/main.css">
<link rel="stylesheet" href="/style/index.css">
<link rel="stylesheet" href="/style/blog.css">
{{end}}

{{define "content"}}
<main>
    <article class="blog">
        <h1 class="typeout">{{.Title}}</h1>
        <p class="blog-date">Posted by <a href="/blog/{{.AuthorID}}">{{.AuthorID}}</a> @ {{.PrintDate}}</p>

        <hr>
        {{.HTML}}

    </article>

    <hr>

    <div class="interactions">
        <span class="likes">❤️ {{.Likes}}</span>
        <span class="reposts">🔁 {{.Reposts}}</span>
    </div>

    <p class="comment-callout">
    join the conversation on
    <a class="btn bluesky" href="{{.BlueskyURL}}" target="_blank">Bluesky 🦋</a>
    <!-- TODO: mastodon support -->
    <!--
        or
        <a class="btn mastodon" href="{{.MastodonURL}}" target="_blank">Mastodon 🐘</a>
    -->
    </p>

    <div class="comments">
        {{range .Comments}}
        {{template "comment" .}}
        {{end}}
    </div>

    <script type="module" src="/script/blog.js"></script>
</main>
{{end}}

{{define "comment"}}
<article class="comment">
    <div class="comment-hover">
        <div class="comment-header">
            <a href="https://bsky.app/profile/{{.Post.Author.DID}}" target="_blank">
                <img class="avatar" src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar">
                <span class="display-name">{{.Post.Author.DisplayName}}</span>
                <span class="handle">@{{.Post.Author.Handle}}</span>
            </a>
        </div>
        <a class="comment-body" href="{{.Post.BskyURL}}" target="_blank">
            <div>
                <p class="comment-text">{{.Post.Record.Text}}</p>
                {{if .Post.HasImage}}
                <p class="comment-images">
                {{range .Post.Embed.Media.Images}}
                <a href="{{.Fullsize}}" target="_blank">[image]</a>
                {{end}}
                </p>
                {{end}}
            </div>
            <div class="comment-footer">
                <span>{{.Post.LikeCount}} like{{if ne .Post.LikeCount 1}}s{{end}}</span>
                &bull;
                <span>{{.Post.RepostCount}} repost{{if ne .Post.RepostCount 1}}s{{end}}</span>
                &bull;
                <span class="comment-date">{{.Post.Record.CreatedAtPrint}}</span>
            </div>
        </a>
    </div>

    <div class="comment-replies">
        {{range .Replies}}
        {{template "comment" .}}
        {{end}}
    </div>
</article>
{{end}}