{% extends 'base.html.twig' %}

{% block ogtags %}
    <meta property="og:title" content="{{ article.title }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ app.request.uri }}">
    {% if article.image %}
        <meta property="og:image" content="{{ article.image }}">
    {% else %}
        <meta property="og:image" content="{{ absolute_url(asset('og-image.jpg')) }}">
    {% endif %}
    <meta property="og:description" content="{{ article.summary|striptags|u.truncate(159,'…')|e }}">
    <meta property="og:site_name" content="{{ website_name }}">
{% endblock %}

{% block body %}


    {% if is_granted('ROLE_ADMIN') %}
    <button class="btn btn-primary" onclick="navigator.clipboard.writeText('30023:{{ article.pubkey }}:{{ article.slug }}')">
        Copy coordinates
    </button>
    {% endif %}

    <div class="card">
        <div class="card-header">
            <h1 class="card-title">{{ article.title }}</h1>
        </div>
        {% if author %}
            <div class="byline">
                <span class="byline__author">
                    {{ 'text.byline'|trans }}
                    <twig:Molecules:UserFromNpub ident="{{ article.pubkey }}" />
                </span>
                <span>
                    {% if article.publishedAt is not null %}
                        <small>{{ article.publishedAt|date('F j, Y') }}</small>
                    {% else %}
                        <small>
{#                            <twig:ux:icon name="heroicons:pencil" class="icon" /> #}
                            {{ article.createdAt|date('F j, Y') }}</small><br>
                    {% endif %}
                </span>
            </div>
        {% endif %}
    </div>
    <div class="card-body">
        <div class="lede">
            {{ article.summary }}
        </div>

        {% if article.image %}
            <div class="article__image">
                <img src="{{ article.image }}" alt="{{ article.title }}">
            </div>
        {% endif %}

        <div class="article-main">
            {{ content|raw }}
        </div>

        {% if article.topics|length > 0 %}
        <hr class="divider" />
        <div class="tags">
            {% for tag in article.topics %}
                <span class="tag">{{ tag }}</span>
            {% endfor %}
        </div>
        {% endif %}

    </div>

    <hr class="divider" />

    {#    <pre>#}
{#        {{ article.content }}#}
{#    </pre>#}
    {% set article_coordinate = '30023:' ~ article.pubkey ~ ':' ~ article.slug %}
    {% set comments_query = article.eventId ? { coordinate: article_coordinate, e: article.eventId } : { coordinate: article_coordinate } %}
    <section class="article-comments-async" aria-label="Comments">
        <div
            data-controller="article-comments"
            data-article-comments-url-value="{{ path('article_comments_fragment', comments_query)|e('html_attr') }}"
        >
            <div data-article-comments-target="container" class="comments comments--pending">
                <p class="text-subtle">Loading comments…</p>
            </div>
        </div>
    </section>
{% endblock %}

{% block aside %}
{#    <h1>Suggestions</h1>#}
{#    <twig:Organisms:CardList :list="suggestions" />#}
{% endblock %}