{{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="https://arimelody.space/blog/{{.ID}}">
<meta property="og:image" content="https://arimelody.space/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/blogpost.css">
{{end}}

{{define "content"}}
<main>
    <div id="blog-sidebar">
        <ul>
            <li>
                <a href="#copy-link" id="blog-copy-link" title="copy link">
                    <div class="dark-only">
                        <img src="/img/blog/copy-link-dark.svg" alt="" width="36" height="36">
                    </div>
                    <div class="light-only">
                        <img src="/img/blog/copy-link-light.svg" alt="" width="36" height="36">
                    </div>
                </a>
            </li>
            {{if ne .BlueskyURL ""}}
            <li>
                <a href="{{.BlueskyURL}}" id="blog-share-bsky" title="share on bluesky">
                    <div class="dark-only">
                        <img src="/img/blog/bluesky-dark.svg" alt="" width="36" height="36">
                    </div>
                    <div class="light-only">
                        <img src="/img/blog/bluesky-light.svg" alt="" width="36" height="36">
                    </div>
                </a>
            </li>
            <hr>
            <li>
                <a href="{{.BlueskyURL}}" id="blog-like" title="like this post">
                    <div class="dark-only">
                        <img src="/img/blog/like-dark.svg" alt="" width="36" height="36">
                    </div>
                    <div class="light-only">
                        <img src="/img/blog/like-light.svg" alt="" width="36" height="36">
                    </div>
                </a>
            </li>
            <li>
                <a href="{{.BlueskyURL}}" id="blog-boost" title="boost this post">
                    <div class="dark-only">
                        <img src="/img/blog/boost-dark.svg" alt="" width="36" height="36">
                    </div>
                    <div class="light-only">
                        <img src="/img/blog/boost-light.svg" alt="" width="36" height="36">
                    </div>
                </a>
            </li>
            <li>
                <a href="#comments" id="blog-comments" title="comments">
                    <div class="dark-only">
                        <img src="/img/blog/comment-dark.svg" alt="" width="36" height="36">
                    </div>
                    <div class="light-only">
                        <img src="/img/blog/comment-light.svg" alt="" width="36" height="36">
                    </div>
                </a>
            </li>
            {{end}}
        </ul>
    </div>
    <div id="blog-container">
        <article class="blog">
            <div id="blog-header">
                <h1 class="typeout"># {{.Title}}</h1>
                <p class="blog-author">by <a href="/blog?author={{.Author.Username}}">{{.Author.Username}} <img src="/img/favicon.png" alt="{{.Author.Username}}'s avatar" width="32" height="32"/></a></p>
                <p class="blog-date">posted {{.PrintDate}}{{if .ModifiedAt.Valid}} <span class="blog-modified-date">&bull; updated {{.PrintModifiedDate}}</span>{{end}}</p>
            </div>

            <hr>

            <div id="blog-content">
                {{.HTML}}
            </div>
        </article>

        {{if ne .BlueskyURL ""}}
        <hr>

        <div id="interactions">
            <button class="likes" aria-label="{{.Likes}} likes">
                <div class="dark-only">
                    <img src="/img/blog/like-dark.svg" alt="" width="32" height="32">
                </div>
                <div class="light-only">
                    <img src="/img/blog/like-light.svg" alt="" width="32" height="32">
                </div>
                {{.Likes}}
            </button>
            <button class="boosts" aria-label="{{.Boosts}} boosts">
                <div class="dark-only">
                    <img src="/img/blog/boost-dark.svg" alt="" width="32" height="32">
                </div>
                <div class="light-only">
                    <img src="/img/blog/boost-light.svg" alt="" width="32" height="32">
                </div>
                {{.Boosts}}
            </button>

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

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

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

{{define "comment"}}
<article class="comment">
    <div class="comment-hover">
        <div class="comment-header">
            <a href="https://bsky.app/profile/{{.Post.Author.Handle}}" target="_blank">
                <img class="avatar" src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar" width="32" height="32">
                <span class="display-name">{{.Post.Author.DisplayName}}</span>
                <span class="handle">@{{.Post.Author.Handle}}</span>
            </a>
        </div>
        <div class="comment-body" 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 class="comment-footer-static">
                    <span>{{.Post.LikeCount}} like{{if ne .Post.LikeCount 1}}s{{end}}</span>
                    &bull;
                    <span>{{.Post.RepostCount}} boost{{if ne .Post.RepostCount 1}}s{{end}}</span>
                    &bull;
                </span>
                <a href="{{.Post.BskyURL}}" class="comment-date">{{.Post.Record.CreatedAtPrint}}</a>
            </div>
        </div>
    </div>

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