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

{% block ogtags %}
    <meta property="og:title" content="{{ article.title }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ canonical }}">
    {% if article.image %}
        <meta property="og:image" content="{{ article.image }}">
    {% endif %}
    <meta property="og:description" content="{{ article.summary|striptags|u.truncate(159,'…')|e }}">
    <meta property="og:site_name" content="Newsroom">
{% endblock %}

{% block body %}
    {% if magazine is defined %}
        <twig:Organisms:MagazineHero :mag="mag" :magazine="magazine"  />
    {% endif %}

    <article class="w-container" data-controller="ui--highlights-toggle">
        <div class="article-actions">
            <div data-controller="utility--share-dropdown" class="dropdown share-dropdown" style="display:inline-block;position:relative;">
                <button data-utility--share-dropdown-target="button"
                        class="btn btn-secondary"
                        id="shareBtn"
                        type="button"
                        aria-haspopup="true"
                        aria-expanded="false"
                        data-action="click->utility--share-dropdown#toggle">
                    Share
                </button>
                <div data-utility--share-dropdown-target="menu"
                     class="dropdown-menu"
                     id="shareDropdown"
                     style="display:none;position:absolute;z-index:1000;min-width:200px;">
                    <button class="dropdown-item"
                            type="button"
                            data-action="click->utility--share-dropdown#copy"
                            data-copy="{{ canonical|e('html_attr') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="vertical-align:middle;">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h6m0 0v6m0-6L10 19l-7-7" />
                        </svg>
                        Newsroom Link
                    </button>
                    <button class="dropdown-item"
                            type="button"
                            data-action="click->utility--share-dropdown#copy"
                            data-copy="{{ article|naddrEncode }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="vertical-align:middle;">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0A9 9 0 11 3 12a9 9 0 0118 0z" />
                        </svg>
                        Naddr
                    </button>
                </div>
            </div>
            {% if canEdit %}
                <a class="btn btn-primary" href="{{ path('editor-edit-slug', {'slug': article.slug}) }}">Edit article</a>
            {% endif %}

            {% if app.user %}
                <twig:ReadingListDropdown coordinate="30023:{{ article.pubkey }}:{{ article.slug }}" />
            {% endif %}

            {# Zap Button with split payment support #}
            {% set zapSplits = article.advancedMetadata.zapSplits|default([]) %}
            {% if zapSplits|length > 0 %}
            <twig:Molecules:ZapButton
                recipientPubkey="{{ article.pubkey }}"
                recipientLud16="{{ author.lud16 is iterable ? author.lud16|first : author.lud16 }}"
                :zapSplits="zapSplits" />

            {# Display split payment indicator #}
            {% if zapSplits|length > 0 %}
                <small class="text-muted ms-2">
                    <em>(Split between {{ zapSplits|length + 1 }} recipients)</em>
                </small>
            {% endif %}
            {% endif %}

            {# Highlights toggle button #}
            {% if highlights is defined and highlights|length > 0 %}
                <button data-ui--highlights-toggle-target="button"
                        data-action="click->ui--highlights-toggle#toggle"
                        class="btn btn-secondary"
                        type="button"
                        aria-pressed="false"
                        title="Toggle highlights">
                    Highlights ({{ highlights|length }})
                </button>
            {% endif %}

        </div>


        <div class="card">
            <div class="card-header">
                <h1 class="card-title">{{ article.title }}</h1>
            </div>
            {% if author %}
                <div class="byline">
                    <span>
                        {{ 'text.byline'|trans }} <a href="{{ path('author-redirect', {'pubkey': article.pubkey}) }}">
                            <twig:Atoms:NameOrNpub :author="author" :npub="npub" />
                        </a>
                    </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>
                        {% 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"
                 {% if highlights is defined and highlights|length > 0 %}
                 data-highlights="{{ highlights|json_encode|e('html_attr') }}"
                 {% endif %}>
                {{ content|raw }}
            </div>

            {% if article.topics|length > 0 %}
            <hr class="divider" />
            <div class="tags">
                {% for tag in article.topics %}
                    {% if tag is not empty %}
                    <a href="{{ path('forum_tag', {'tag': tag|url_encode}) }}" class="tag">#{{ tag }}</a>
                    {% endif %}
                {% endfor %}
            </div>
            {% endif %}

        </div>

        {% if is_granted('ROLE_ADMIN') %}
        <pre>
            {{ article.raw|json_encode(constant('JSON_PRETTY_PRINT')) }}
        </pre>
        {% endif %}

        <twig:Organisms:CommentForm
            :publish_url="path('comment_publish')"
            :csrf_token="csrf_token('comment_publish')"
            :root_context="{
                tag: 'A',
                value: '30023:' ~ article.pubkey ~ ':' ~ article.slug,
                relay: null,
                pubkey: article.pubkey,
                kind: 30023
            }"
            :parent_context="{
                tag: 'a',
                value: '30023:' ~ article.pubkey ~ ':' ~ article.slug,
                relay: null,
                pubkey: article.pubkey,
                kind: 30023
            }" />

        <twig:Organisms:Comments current="30023:{{ article.pubkey }}:{{ article.slug|e }}"></twig:Organisms:Comments>

        {# Mobile highlights - shown after comments on narrow screens #}
        {% if highlights is defined and highlights|length > 0 %}
            <div class="highlights-mobile-section">
                <h3 class="highlights-mobile-heading">Highlights ({{ highlights|length }})</h3>
                <div class="highlights-mobile-grid">
                    {% for highlight in highlights %}
                        <div class="highlight-card-compact">
                            <div class="highlight-header-compact">
                                {% if highlight.pubkey %}
                                    <twig:Molecules:UserFromNpub
                                        ident="{{ highlight.pubkey }}"
                                        :compact="true"
                                    />
                                {% else %}
                                    <span class="text-muted">Anonymous</span>
                                {% endif %}
                                <small class="text-muted ms-auto">
                                    {{ highlight.created_at|date('M j') }}
                                </small>
                            </div>
                            <div class="highlight-content-compact">
                                {% if highlight.context %}
                                    {% set htmlContext = highlight.context|markdown_to_html %}
                                    {% if highlight.content in highlight.context %}
                                        {% set wrapper = '<mark class="highlight-mark-compact">' ~ highlight.content ~ '</mark>' %}
                                        {% set rendered = htmlContext|replace({ (highlight.content): wrapper }) %}
                                        {{ rendered|raw }}
                                    {% else %}
                                        <div class="context-text-compact">{{ htmlContext|raw }}</div>
                                        <mark class="highlight-mark-compact">{{ highlight.content }}</mark>
                                    {% endif %}
                                {% else %}
                                    <mark class="highlight-mark-compact">{{ highlight.content }}</mark>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </article>
{% endblock %}

{% block aside %}
    {% if highlights is defined and highlights|length > 0 %}
        <div class="sidebar-section">
            <h3 class="sidebar-heading">Highlights ({{ highlights|length }})</h3>
            <div class="highlights-sidebar">
                {% for highlight in highlights %}
                    <div class="highlight-card-compact">
                        <div class="highlight-header-compact">
                            {% if highlight.pubkey %}
                                <twig:Molecules:UserFromNpub
                                    ident="{{ highlight.pubkey }}"
                                    :compact="true"
                                />
                            {% else %}
                                <span class="text-muted">Anonymous</span>
                            {% endif %}
                            <small class="text-muted ms-auto">
                                {{ highlight.created_at|date('M j') }}
                            </small>
                        </div>

                        {% if highlight.context %}
                            {% set htmlContext = highlight.context|markdown_to_html %}
                            {% if highlight.content in highlight.context %}
                                {% set wrapper = '<mark class="highlight-mark-compact">' ~ highlight.content ~ '</mark>' %}
                                {% set rendered = htmlContext|replace({ (highlight.content): wrapper }) %}
                                {{ rendered|raw }}
                            {% else %}
                                <div class="context-text-compact">{{ htmlContext|raw }}</div>
                                <mark class="highlight-mark-compact">{{ highlight.content }}</mark>
                            {% endif %}
                        {% else %}
                            {% set charLimit = 450 %}
                            {% set content = highlight.content %}
                            {% if content|length > charLimit %}
                                <div data-utility--show-more-target="preview">
                                    {{ content|slice(0, charLimit) ~ '…' }}
                                </div>
                                <div data-utility--show-more-target="full" style="display:none;">
                                    {{ content }}
                                </div>
                                <button type="button"
                                        class="btn btn-link btn-sm p-0 mt-1"
                                        data-utility--show-more-target="button"
                                        data-action="utility--show-more#toggle">
                                    Show more
                                </button>
                            {% else %}
                                <mark class="highlight-mark-compact">{{ content }}</mark>
                            {% endif %}
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

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