{% extends "base.html" %}

{% block title %}{{ title }} - {{ project_title }}{% endblock %}
{% block body_attrs %} class="article-page"{% endblock %}

{% block head %}
<meta property="og:title" content="{{ title }} - {{ project_title }}">
<meta property="og:description" content="{{ creator_display_name.as_deref().unwrap_or(&creator_username) }} on Makenot.work">
<meta property="og:type" content="article">
<meta property="og:url" content="{{ host_url }}/p/{{ project_slug }}/blog/{{ post_slug }}">
<link rel="canonical" href="{{ host_url }}/p/{{ project_slug }}/blog/{{ post_slug }}">
<meta property="og:site_name" content="Makenot.work">
<meta name="twitter:title" content="{{ title }} - {{ project_title }}">
<meta name="twitter:description" content="{{ creator_display_name.as_deref().unwrap_or(&creator_username) }} on Makenot.work">
{% if let Some(img) = project_cover_image_url %}
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="{{ img }}">
<meta name="twitter:image" content="{{ img }}">
{% else %}
<meta name="twitter:card" content="summary">
<meta property="og:image" content="{{ host_url }}/static/images/og-card.png">
<meta name="twitter:image" content="{{ host_url }}/static/images/og-card.png">
{% endif %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": "{{ title_json|safe }}",
    "url": "{{ host_url }}/p/{{ project_slug }}/blog/{{ post_slug }}",
    "author": {
        "@type": "Person",
        "name": "{{ creator_username }}",
        "url": "{{ host_url }}/u/{{ creator_username }}"
    },
    "datePublished": "{{ published_at }}",
    "isPartOf": {
        "@type": "Blog",
        "name": "{{ project_title_json|safe }}",
        "url": "{{ host_url }}/p/{{ project_slug }}/blog"
    }
}
</script>
{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <article class="article-container">
        <div class="blog-nav">
            <a href="/p/{{ project_slug }}">{{ project_title }}</a> /
            <a href="/p/{{ project_slug }}/blog">Blog</a>
        </div>

        <header class="author-header">
            <div class="author-avatar">{{ creator_avatar_initials }}</div>
            <div class="author-info">
                <div class="author-name"><a href="/u/{{ creator_username }}">{% if let Some(name) = creator_display_name %}{{ name }}{% else %}{{ creator_username }}{% endif %}</a></div>
                <div class="article-meta">{{ published_at }}</div>
            </div>
        </header>

        <h1 class="article-title">{{ title }}</h1>

        <div class="article-body">
            {{ body_html|safe }}
        </div>

        <footer class="article-footer">
            <div class="blog-nav">
                <a href="/p/{{ project_slug }}/blog">Back to all posts</a>
            </div>
        </footer>
    </article>

    {% include "partials/discussion_section.html" %}

    <footer class="text-reader-footer">
        <a href="/p/{{ project_slug }}/blog/{{ post_slug }}" data-copy-link>Copy link</a> &middot;
        <a href="/">Makenot<span class="dot">.</span>work</a> | Fair distribution for creatives of all kinds
    </footer>
{% endblock %}