---
layout: base.njk
includePrism: true
---
<main class="wrapper-lg stack-lg">
    <article class="stack-md h-entry">
            <h1 class="p-name"><a href="{{ url }}" class="u-url">{{ title | safe }}</a></h1>
            <p class="published">Published: <time class="dt-published" datetime="{{ page.date | dateToRfc3339 }}">{{ page.date | dateDisplay }}</time></p>
        <div class="e-content stack-md">
        {{ content | safe }}
        </div>
        {% set filteredTags = tags | except("posts") | except("draft") %}
        {% if filteredTags | length %}
        <section>
            <h2>Tags:</h2>
            <ul role="list">
                {% for tag in filteredTags %}
                    <li><a class="p-category" href="/post/tag/{{ tag }}" rel="tag">#{{ tag }}</a></li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}
    </article>

    <section class="p-author h-card" data-section="author">
      <h2>About the author</h2>
      {% image metadata.author.avatar, "My face", "box circle u-photo", "(max-width: 500px) 50px, 100px", [50, 100] %}

      <p class="p-note">I'm <a href="https://{{metadata.site.domain}}" class="u-url p-name">Lewis Dale</a>, a software engineer and web developer based in the UK. I write about writing software, silly projects, and cycling. A lot of cycling. Too much, maybe.</p>
    </section>

    <section class="stack-sm" data-section="responses">
        <h2>Responses</h2>
        
        {% if post.comments.like | length %}
        <div class="stack-xs">
            <h3 class="block w-full">Likes</h3>

            <div class="row overlaps">
            {% for like in post.comments.like %}
                <a href="{{ like.author.url }}" rel="noreferrer" target="_blank">
                    {% remoteImage(like.author.avatars["96"], like.author.name, "circle", "96px", [96] %}
                </a>
            {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if post.comments.repost | length %}
        <div class="stack-xs">
            <h3 class="block w-full">Reposts</h3>

            <div class="row overlaps">
            {% for repost in post.comments.repost %}
                <a href="{{ repost.author.url }}" rel="noreferrer" target="_blank">
                    {% remoteImage(repost.author.avatars["96"], repost.author.name, "circle", "96px", [96] %}
                </a>
            {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if post.comments.comment | length %}
        <div class="stack-xs">
            <h3 class="block w-full">Replies</h3>

            <ol class="stack-md">
                {% for reply in post.comments.comment | reverse %}

                <li class="sidebar items-center">
    
                    <div class="stack-2xs basis-[50ch]">
                        {% set date = reply.date | parseDate %}
                        <h4><a href="{{ reply.author.url }}" rel="noreferrer" target="_blank">{{ reply.author.name }}</a> <span class="font-normal">on</span> {{ date | dateDisplay }} <span class="font-normal">at</span> {{ date | timeDisplay }}</h4>
                        <a href="{{ reply.canonical }}" rel="noreferrer" target="_blank">Original comment</a>
                        <p>{{ reply.content | safe }}</p>
                    </div>
                </li>
                {% endfor %}
            </ol>
        </div>
        {% endif %}

    </section>

</main>
