{% extends "base.html" %}

{% block title %}{{ item.title }} - Makenotwork{% endblock %}
{% block body_attrs %} class="article-page"{% endblock %}

{% block head %}
<meta property="og:title" content="{{ item.title }} - {{ creator_username }}">
<meta property="og:description" content="{{ item.description }}">
<meta property="og:type" content="article">
<meta property="og:url" content="{{ host_url }}/i/{{ item.id }}">
<meta property="og:site_name" content="Makenot.work">
{% if let Some(img) = item.cover_image_url %}
<meta property="og:image" content="{{ img }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ img }}">
{% else %}
<meta name="twitter:card" content="summary">
{% endif %}
<meta name="twitter:title" content="{{ item.title }} - {{ creator_username }}">
<meta name="twitter:description" content="{{ item.description }}">
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "{{ item.title_json()|safe }}",
    "description": "{{ item.description_json()|safe }}",
    "url": "{{ host_url }}/i/{{ item.id }}",
    "author": {
        "@type": "Person",
        "name": "{{ creator_username }}",
        "url": "{{ host_url }}/u/{{ creator_username }}"
    },
    "datePublished": "{{ item.release_date }}"{% if let Some(img) = item.cover_image_url %},
    "image": "{{ img }}"{% endif %},
    "isPartOf": {
        "@type": "WebSite",
        "name": "Makenot.work",
        "url": "{{ host_url }}"
    }
}
</script>
{% endblock %}

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

    <article class="article-container">
        <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">{{ item.release_date }}{% match item.content %}{% when crate::types::ItemContent::Text with { reading_time, .. } %}{% if let Some(rt) = reading_time %} | {{ rt }}{% endif %}{% when _ %}{% endmatch %}</div>
            </div>
        </header>

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

        {% if !item.description.is_empty() %}
        <p class="article-deck">{{ item.description }}</p>
        {% endif %}

        {% if let Some(text) = excerpt %}
        <div class="article-body article-body--excerpt">
            <p>{{ text }}</p>
        </div>
        {% endif %}

        <div class="store-cta">
            {% if has_access %}
            <p class="store-cta-lead">You have access to this article.</p>
            <a href="/l/{{ item.id }}" class="btn-primary">Read in library &rarr;</a>
            {% else if is_free %}
                {% if let Some(_user) = session_user %}
                    {% if in_library %}
                    <span class="library-status">In your library &middot; <a href="/l/{{ item.id }}">Read now &rarr;</a></span>
                    {% else %}
                    <button class="add-to-library-btn btn-primary"
                            hx-post="/api/library/add/{{ item.id }}"
                            hx-swap="outerHTML">Add to Library - Free</button>
                    {% endif %}
                {% else %}
                <a href="/login?redirect=/l/{{ item.id }}" class="btn-primary">Log in to read - Free</a>
                {% endif %}
            {% else %}
            <p class="store-cta-price">{{ item.price }}</p>
                {% if let Some(_user) = session_user %}
                <a href="/purchase/{{ item.id }}" class="btn-primary">{% if item.pwyw_enabled %}Pay What You Want{% else %}Buy Once{% endif %} - {{ item.price }}</a>
                {% else %}
                <a href="/login?redirect=/i/{{ item.id }}" class="btn-primary">Log in to purchase</a>
                {% endif %}
            <p class="store-cta-note">Support {{ creator_username }} directly &mdash; 0% platform fee.</p>
            {% endif %}
        </div>

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

            {% if !item.tags.is_empty() %}
            <div class="article-tags">
                {% for tag in item.tags %}
                <a href="/discover?tag={{ tag.slug }}" class="article-tag article-tag--plain">{{ tag.name }}</a>
                {% endfor %}
            </div>
            {% endif %}
        </footer>
    </article>

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

    <footer class="text-reader-footer">
        <a href="/i/{{ item.id }}" 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 %}