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

{% form_theme form _self 'pages/_advanced_metadata.html.twig' %}

{% block quill_widget %}
    <div {{ stimulus_controller('publishing--quill') }} class="quill" data-id="{{ id }}" >
        <div id="editor">
            {{ value|raw }}
        </div>
        <input type="hidden" {{ block('widget_attributes') }} value="{{ value }}" />
    </div>
{% endblock %}

{% block header %}
    <header class="editor-header" data-controller="editor--header" data-editor--header-target="header">
        <div class="editor-header-left">
            <a href="{{ path('home') }}" class="btn">← Back</a>
            {# If not create new, show btn for 'Create new' #}
            {% if article.id %}
                <a href="{{ path('editor-create') }}" class="btn btn-secondary">
                    Create new
                </a>
            {% endif %}
            <div class="editor-title">
                {{ article.title|default('New article') }}
            </div>
        </div>

        <div class="editor-header-right">
            {# Status indicator #}
            <span class="editor-status text-muted" data-editor--layout-target="status">
                {% if article.id %}Editing{% else %}New article{% endif %}
            </span>
            <button type="button" class="btn btn-secondary" data-action="editor--header#saveDraft">
                Save draft
            </button>
            <button type="button" class="btn btn-primary" data-action="editor--header#publish">
                Publish
            </button>
        </div>
    </header>
{% endblock %}

{% block layout %}
{# Toast notification system #}
{% include 'components/Toast.html.twig' %}

<main class="editor-layout" data-controller="editor--layout nostr--nostr-single-sign" data-article-id="{{ article.id|default('') }}" data-nostr--nostr-single-sign-publish-url-value="{{ path('api-article-publish') }}">
    <div class="editor-main">
        <div data-nostr--nostr-single-sign-target="status"
             style="position: fixed;top: 65px;right: 10px;"
        ></div>
        {# Insert the article list sidebar as the first grid column #}
        {% include 'editor/panels/_articlelist.html.twig' with {
            readingLists: readingLists is defined ? readingLists : [],
            recentArticles: recentArticles is defined ? recentArticles : [],
            drafts: drafts is defined ? drafts : []
        } %}
        {# Center editor area (middle grid column) #}
        <div class="editor-center">
            <div class="editor-center-tabs">
                <button
                    type="button"
                    class="editor-tab is-active"
                    data-editor--layout-target="modeTab"
                    data-mode="edit"
                    data-action="editor--layout#switchMode"
                >
                    Rich Text
                </button>
                <button
                    type="button"
                    class="editor-tab"
                    data-editor--layout-target="modeTab"
                    data-mode="markdown"
                    data-action="editor--layout#switchMode"
                >
                    Markdown
                </button>
                <button
                    type="button"
                    class="editor-tab"
                    style="margin-left: auto"
                    data-editor--layout-target="modeTab"
                    data-mode="json"
                    data-action="editor--layout#switchMode"
                >
                    JSON
                </button>
                <button
                    type="button"
                    class="editor-tab"
                    data-editor--layout-target="modeTab"
                    data-mode="preview"
                    data-action="editor--layout#switchMode"
                >
                    Preview
                </button>
            </div>

            <div class="editor-center-content">
                {{ form_start(form) }}
                {# Hidden field for draft status - controlled by Save Draft / Publish buttons #}
                {{ form_widget(form.isDraft, {'attr': {'class': 'hidden'}}) }}
                {# Hidden fields for content delta and NMD #}
                {{ form_widget(form.contentDelta) }}

                <div
                    class="editor-pane editor-pane--edit"
                    data-editor--layout-target="editPane"
                >
                    {# Title field at top of editor #}
                    <div class="editor-title-input">
                        {{ form_row(form.title, {
                            'label': false,
                            'attr': {'placeholder': 'Article title', 'class': 'form-control editor-title-field'}
                        }) }}
                    </div>

                    {# QuillJS editor container, now using content_html #}
                    {{ form_row(form.content_html, {'label': false}) }}



                    {# Mobile action buttons at bottom #}
                    <div class="editor-mobile-actions">
                        <button type="button" class="btn btn-secondary btn-lg" data-action="editor--layout#saveDraft">
                            Save draft
                        </button>
                        <button type="button" class="btn btn-primary btn-lg" data-action="editor--layout#publish">
                            Publish
                        </button>
                    </div>
                </div>

                <div
                    class="editor-pane editor-pane--markdown is-hidden"
                    data-editor--layout-target="markdownPane"
                    data-controller="editor--markdown-sync"
                >
                    {# Markdown editor #}
                    <div class="markdown-editor-wrapper">
                        <div class="editor-title-input">
                            <input
                                type="text"
                                class="form-control editor-title-field"
                                placeholder="Article title"
                                data-editor--layout-target="markdownTitle"
                                readonly
                            />
                        </div>
                        {{ form_widget(form.contentNMD) }}
                        {{ form_row(form.content, {'label': false, 'attr': {'class': 'form-control editor-md-field'}}) }}
                    </div>
                </div>

                <div
                    class="editor-pane editor-pane--json is-hidden"
                    data-editor--layout-target="jsonPane"
                >
                    {% include 'editor/panels/_json.html.twig' %}
                </div>

                <div
                    class="editor-pane editor-pane--preview is-hidden"
                    data-editor--layout-target="previewPane"
                >
                    <div class="card preview-container">
                        <div class="card-header">
                            <h1 class="card-title preview-title" data-editor--layout-target="previewTitle">
                                {{ article.title|default('Article title') }}
                            </h1>
                            <div class="byline">
                                <span>
                                    By <span class="preview-author" data-editor--layout-target="previewAuthor">...</span>
                                </span>
                                <span>
                                    <small class="preview-date" data-editor--layout-target="previewDate">Date</small>
                                </span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="lede preview-summary" data-editor--layout-target="previewSummary"></div>
                            <div class="article__image preview-image-wrap">
                                <img class="preview-image" data-editor--layout-target="previewImage" src="" alt="Cover image preview" style="display:none;"/>
                                <div class="preview-image-placeholder" data-editor--layout-target="previewImagePlaceholder" style="display:none;">
                                    <span>No cover image</span>
                                </div>
                            </div>
                            <div class="article-main" data-editor--layout-target="previewBody">
                                {# Filled by JS #}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {# Right sidebar (last grid column) #}
        <aside class="editor-sidebar" data-controller="editor--panels">
            <div class="editor-sidebar-tabs">
                <button
                    type="button"
                    class="editor-sidebar-tab is-active"
                    data-editor--panels-target="tab"
                    data-panel="metadata"
                    data-action="editor--panels#switch"
                >
                    Metadata
                </button>
{#                <button#}
{#                    type="button"#}
{#                    class="editor-sidebar-tab"#}
{#                    data-editor--panels-target="tab"#}
{#                    data-panel="advanced"#}
{#                    data-action="editor--panels#switch"#}
{#                >#}
{#                    Advanced#}
{#                </button>#}
                <button
                    type="button"
                    class="editor-sidebar-tab"
                    data-editor--panels-target="tab"
                    data-panel="relays"
                    data-action="editor--panels#switch"
                >
                    Relays
                </button>
                {# Media tab temporarily hidden - will be redesigned later
                <button
                    type="button"
                    class="editor-sidebar-tab"
                    data-editor--panels-target="tab"
                    data-panel="media"
                    data-action="editor--panels#switch"
                >
                    Media
                </button>
                #}
            </div>

            <section class="editor-sidebar-panels">
                <div
                    class="editor-panel"
                    data-editor--panels-target="panel"
                    data-panel="metadata"
                >
                    {% include 'editor/panels/_metadata.html.twig' with { form: form } %}
                </div>

                <div
                    class="editor-panel is-hidden"
                    data-editor--panels-target="panel"
                    data-panel="advanced"
                >
                    {% include 'editor/panels/_advanced.html.twig' with { form: form } %}
                </div>

                <div
                    class="editor-panel is-hidden"
                    data-editor--panels-target="panel"
                    data-panel="relays"
                >
                    {% include 'editor/panels/_relays.html.twig' with { form: form } %}
                </div>

                {# Media panel temporarily hidden - will be redesigned later
                <div
                    class="editor-panel is-hidden"
                    data-editor--panels-target="panel"
                    data-panel="media"
                >
                    {% include 'editor/panels/_media.html.twig' %}
                </div>
                #}
            </section>
        </aside>

        {{ form_row(form.pubkey, {'value': app.user ? app.user.userIdentifier|toHex : ''}) }}
        {{ form_row(form.loginMethod, {'value': app.session.get('nostr_sign_method', '')}) }}
        {{ form_end(form) }}
    </div>

    {# Hidden container for Nostr publishing (no JSON textarea, uses canonical panel) #}
    <div {{ stimulus_controller('nostr--nostr-publish', {
        publishUrl: path('api-article-publish'),
        pubkey: app.user ? app.user.userIdentifier|toHex : '<pubkey>'
    }) }} data-nostr--nostr-publish-target="form" data-slug="{{ article.slug|default('') }}">
        <div data-nostr--nostr-publish-target="status"
             style="position: fixed;top: 65px;right: 10px;"
        ></div>
        <button style="display: none;"
                data-nostr--nostr-publish-target="publishButton"
                data-action="nostr--nostr-publish#publish"
        ></button>
    </div>

    {# Modal for anon user authentication choice #}
    <div id="auth-choice-modal" class="modal" tabindex="-1" style="display:none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Choose Authentication Method</h5>
                </div>
                <div class="modal-body">
                    <p>You need to sign in to publish. Please choose a method:</p>
                    <button type="button" class="btn btn-accent" id="proceed-with-signer">Proceed with Signer</button>
                    <button type="button" class="btn btn-accent" id="proceed-with-extension">Proceed with Extension</button>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}

{% block footer %}
{% endblock %}