{% extends "base.html" %}

{% block meta %}
    <meta property="og:url" content="{{ config.url + post.url }}" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="{{ post.title }}" />
    <meta property="og:description" content="{{ post.summary }}" />

    <meta name="description" content="{{ post.summary }}" />

    {% if post.parsed['keywords'] %}
    <meta name="keywords" content="{{ post.parsed.keywords }}" />
    {% endif %}

    {% if post.parsed['authors'] %}
    <meta name="author" content="{{ post.parsed['authors'] }}" />
    {% endif %}
{% endblock %}

{% block title %}{{ config.title }}: {{ post.title }}{% endblock %}

{% block css %}
    {% for stylesheet in stylesheets %}
    <link href="{{ stylesheet }}" rel="stylesheet">
    {% endfor %}
{% endblock %}

{% block javascript %}
    {% for script in scripts %}
    <script src="{{ script }}"></script>
    {% endfor %}
{% endblock %}

{% block content %}
            <div class="posts">
                <h1 class="content-subhead">
                    {% for name, target in breadcrumbs %}
                        {{ "&raquo;" if not loop.first }}
                        {% if target %}
                            <a href="{{ target }}">{{ name }}</a>
                        {% else %}
                            {{ name }}
                        {% endif %}
                    {% endfor %}
                </h1>

                <!-- A single blog post -->
                {% set keywords = post.parsed.keywords.replace(" ", "").split(",") %}
                <section class="post h-entry">
                    <header class="post-header">
                        <img width="48" height="48" alt="{{ config.author.name }}&#x27;s avatar" class="post-avatar" src="{{ config.author.profile_picture }}">

                        <h2 class="post-title p-name">{{ post.title }}</h2>

                        <h3 class="post-subtitle p-summary">{{ post.summary }}</h3>

                        <p class="post-meta">
                            By <span class="h-card p-author">
                                <a class="p-name u-url" rel="author me" href="{{ config.url }}">{{ config.author.name }}</a>
                                (<a class="u-email" href="mailto:{{ config.author.email }}">{{ config.author.email }}</a>)
                                <a class="u-photo hidden" href="{{ config.author.profile_picture }}"></a>
                                <span class="p-note hidden">{{ config.author.note }}</span>
                            </span>
                            on <time class="dt-published" datetime="{{ post.date.isoformat() }}" pubdate>{{ post.date.strftime('%Y-%m-%d') }}</time>
                            under
                            {% if config.builders.tags %}
                            {% for keyword in keywords %}
                            <a class="post-category p-category" style="background-color: {{ random_color(keyword) }}" href="/{{ keyword }}.html">{{ keyword }}</a>
                            {% endfor %}
                            {% endif %}
                        </p>
                    </header>

                    <div class="post-description e-content">
                        {{ post.html }}

                        <!--
                        This is the raw Markdown post:

                        {{ post.markdown|e }}
                        -->
                    </div>

                    {% if "indieweb" in keywords or "indienews" in keywords %}
                    (<a href="https://news.indieweb.org/{{ language }}" class="u-syndication">Also posted on IndieNews</a>.)
                    {% endif %}
                </section>

                <h1 class="content-subhead">Comments</h1>

                {% if json.links %}
                <p>You can engage with this post on
                {% for site, url in json.links.items() %}
                {%- if loop.first -%}
                {% elif loop.last %}
                or
                {%- else -%}
                ,
                {%- endif %}
                <a href="{{ url }}">{{ site }}</a>
                {%- endfor -%}.
                {% endif %}

                {% for reply in json.replies %}
                <div class="comment" style="border-left-color: {{ reply.color }}">
                        <div>
                            <img width="48" height="48" alt="{{ reply.user.name }}&#x27;s avatar" class="comment-avatar" src="{{ reply.user.image }}">
                        </div>
                        <div>
                            <div class="comment-meta">
                                {% if reply.user.url %}
                                <a class="comment-author" rel="nofollow" title="{{ reply.user.description }}" href="{{ reply.user.url }}">{{ reply.user.name }}</a>
                                {% else %}
                                <strong>{{ reply.user.name }}</strong>
                                {% endif %}
                                replied on
                                <a href="{{ reply.url }}">{{ reply.source }}</a>
                                on
                                {% if reply.comment.url %}
                                <a rel="nofollow" title="{{ reply.timestamp|formatdate("%c") }}" href="{{ reply.comment.url }}">{{ reply.timestamp|formatdate("%Y-%m-%d") }}</a>:
                                {% else %}
                                <span title="{{ reply.timestamp|formatdate("%c") }}">{{ reply.timestamp|formatdate("%Y-%m-%d") }}</span>
                                {% endif %}
                            </div>
                            <div class="comment-description">
                                <p>{{ reply.comment.summary or reply.comment.text }}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
{% endblock %}
