{% extends 'admin/base_admin.html.twig' %}
{% block title %}{{ article.id ? 'Éditer' : 'Nouvel article' }}{% endblock %}
{% block breadcrumb %}Articles / {{ article.id ? 'Édition' : 'Nouveau' }}{% endblock %}
{% block content %}
<form method="post">
    <div class="head-row">
        <div><h1 class="page-title" style="font-size:24px">{{ article.id ? 'Éditer l’article' : 'Nouvel article' }}</h1></div>
        <div style="display:flex;gap:10px">
            <a class="btn btn--ghost" href="{{ path('admin_article_index') }}">Annuler</a>
            {% if article.id %}<a class="btn btn--ghost" href="{{ path('admin_article_preview', {id: article.id}) }}" target="_blank" rel="noopener">Prévisualiser</a>{% endif %}
            <button class="btn btn--primary" type="submit">Enregistrer</button>
        </div>
    </div>

    <div class="grid-2">
        <div>
            <div class="card card--pad" style="margin-bottom:20px">
                <input class="title-input" type="text" name="title" value="{{ article.title }}" placeholder="Titre de l'article…" required>
            </div>

            <div class="editor-shell">
                <div class="editor-toolbar" data-editor-toolbar>
                    <button type="button" data-cmd="bold" title="Gras"><b>B</b></button>
                    <button type="button" data-cmd="italic" title="Italique"><i>I</i></button>
                    <button type="button" data-cmd="h2" title="Titre 2">H2</button>
                    <button type="button" data-cmd="h3" title="Titre 3">H3</button>
                    <button type="button" data-cmd="ul" title="Liste">• —</button>
                    <button type="button" data-cmd="ol" title="Liste numérotée">1.</button>
                    <button type="button" data-cmd="link" title="Lien">🔗</button>
                    <button type="button" data-cmd="quote" title="Citation">❝</button>
                    <button type="button" data-cmd="code" title="Code">&lt;/&gt;</button>
                </div>
                <div class="editor-area" data-editor contenteditable="true">{{ article.content|raw }}</div>
            </div>
            <input type="hidden" name="content" data-editor-input value="{{ article.content }}">
        </div>

        <div>
            <div class="card card--pad" style="margin-bottom:20px">
                <label class="field"><span>Statut</span>
                    <select name="status">
                        <option value="draft" {{ not article.published ? 'selected' }}>Brouillon</option>
                        <option value="published" {{ article.published ? 'selected' }}>Publié</option>
                    </select>
                </label>
                <label class="field"><span>Date de publication</span>
                    <input type="datetime-local" name="published_at" value="{{ article.publishedAt ? article.publishedAt|date('Y-m-d\\TH:i') }}">
                </label>
                <label class="field"><span>Catégorie</span>
                    <select name="category">
                        <option value="">— Aucune —</option>
                        {% for c in categories %}<option value="{{ c.id }}" {{ article.category and article.category.id == c.id ? 'selected' }}>{{ c.name }}</option>{% endfor %}
                    </select>
                </label>
                <label class="field"><span>Extrait</span>
                    <textarea name="excerpt" rows="3">{{ article.excerpt }}</textarea>
                </label>
            </div>

            <div class="card card--pad" style="margin-bottom:20px">
                <div class="field"><span>Image de couverture</span></div>
                <div data-media-single
                     data-upload="{{ path('admin_media_upload') }}"
                     data-field="#featured_image"
                     data-remove="#featured_remove"
                     data-preview="#featured_preview"
                     data-value="url">
                    <div id="featured_preview" class="media-preview" style="{{ article.featuredImage ? '' : 'display:none' }}">
                        <img src="{{ article.featuredImage }}" alt="" style="width:100%;border-radius:10px;display:block">
                        <button type="button" class="pill-btn" data-media-clear style="color:var(--red);margin-top:8px">Retirer l’image</button>
                    </div>
                    <input type="file" class="filepond-single" name="file" accept="image/*">
                </div>
                <input type="hidden" name="featured_image" id="featured_image" value="{{ article.featuredImage }}">
                <input type="hidden" name="featured_remove" id="featured_remove" value="0">
            </div>

            <div class="card card--pad" style="margin-bottom:20px">
                <div class="field"><span>Référencement (SEO)</span></div>
                <label class="field"><span>Titre SEO</span><input type="text" name="meta_title" value="{{ article.metaTitle }}" maxlength="200" placeholder="{{ article.title }}"></label>
                <label class="field"><span>Méta-description</span><textarea name="meta_description" rows="3" placeholder="{{ article.excerpt }}">{{ article.metaDescription }}</textarea></label>
            </div>

            <div class="card card--pad">
                <div class="field"><span>Tags</span></div>
                <div style="display:flex;flex-wrap:wrap;gap:8px">
                    {% for t in allTags %}
                        <label class="pill-btn" style="cursor:pointer">
                            <input type="checkbox" name="tags[]" value="{{ t.id }}" style="width:auto;margin-right:6px" {{ t in article.tags ? 'checked' }}>{{ t.name }}
                        </label>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock %}