{% 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 %}

    <pre>
        {{ article.topics|json_encode(constant('JSON_PRETTY_PRINT')) }}
    </pre>

    <div class="article-actions">
        {% 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 %}

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

        <!-- Share Button Dropdown -->
        {% if feature_flag_share_btn %}
        <div class="dropdown share-dropdown" style="display:inline-block;position:relative;">
            <button class="btn btn-secondary" id="shareBtn" type="button" aria-haspopup="true" aria-expanded="false">
                Share
            </button>
            <div class="dropdown-menu" id="shareDropdown" style="display:none;position:absolute;z-index:1000;min-width:200px;background:#fff;border:1px solid #ccc;padding:0.5em 0;box-shadow:0 2px 8px rgba(0,0,0,0.1);">
                <button class="dropdown-item" type="button" onclick="copyShareLink('{{ canonical|e('js') }}', this)">
                    <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>
                    Share Newsroom Link
                </button>
{#                <button class="dropdown-item" type="button" onclick="copyShareLink('30023:{{ article.pubkey }}:{{ article.slug }}', this)">#}
{#                    <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>#}
{#                    Share naddr#}
{#                </button>#}
            </div>
        </div>
        <script>
            // Share dropdown toggle
            document.addEventListener('DOMContentLoaded', function() {
                var btn = document.getElementById('shareBtn');
                var menu = document.getElementById('shareDropdown');
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
                });
                document.addEventListener('click', function() {
                    menu.style.display = 'none';
                });
            });
            // Copy to clipboard with feedback
            function copyShareLink(text, el) {
                navigator.clipboard.writeText(text).then(function() {
                    var orig = el.innerHTML;
                    el.innerHTML = 'Copied!';
                    setTimeout(function() { el.innerHTML = orig; }, 1200);
                });
            }
        </script>
        {% endif %}
    </div>

    <article class="w-container">
        <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><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>

        <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>
    </article>
{% endblock %}

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