{% extends "layout.twig" %}

{% block title %}
{% if post is defined and post is not null and post.id > 0 %}
Éditer l'article
{% else %}
Créer un article
{% endif %}
{% endblock %}

{% block content %}

<h2>
    {% if post is defined and post is not null and post.id > 0 %}
    Éditer l'article
    {% else %}
    Créer un article
    {% endif %}
</h2>

{# Formulaire identifié pour le script JavaScript #}
<form id="articleForm" method="post" action="{{ action }}">
    <p>
        <label for="title">Titre<br>
            <input type="text" id="title" name="title" value="{{ post.title|default('') }}" required maxlength="255">
        </label>
    </p>

    <p>
        <label for="editor">Contenu<br>
            {# <textarea id="editor" name="content" rows="6" required>{{ post.content|default('') }}</textarea> #}
            <textarea id="editor" name="content" rows="6" required></textarea>
        </label>
    </p>

    <p>
        <button type="submit" class="btn btn-primary">
            {% if post is defined and post is not null and post.id > 0 %}
            Mettre à jour
            {% else %}
            Enregistrer
            {% endif %}
        </button>
        <a href="/admin" class="btn btn-secondary">Annuler</a>
    </p>
</form>

{% if post is defined and post is not null and post.id > 0 %}
<hr>
<small>
    Créé le : {{ post.createdAt|date("d/m/Y à H:i") }}<br>
    Modifié le : {{ post.updatedAt|date("d/m/Y à H:i") }}
</small>
{% endif %}

{% endblock %}

{% block scripts %}
<script src="/js/tinymce/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
<script>
    tinymce.init({
        selector: '#editor',
        base_url: '/js/tinymce',
        license_key: 'gpl',
        height: 400,
        menubar: false,
        plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image',
            'charmap', 'preview', 'anchor', 'searchreplace',
            'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table',
            'help', 'wordcount'
        ],
        toolbar: [
            'undo redo | formatselect | bold italic underline |',
            'alignleft aligncenter alignright alignjustify |',
            'bullist numlist outdent indent | link image media |',
            'removeformat | help'
        ].join(' '),
        content_style: 'body {font-family:Helvetica,Arial,sans-serif;font-size:14px}'
    });

    // Synchroniser TinyMCE avant soumission du formulaire
    document.getElementById('articleForm').addEventListener('submit', function (e) {
        tinymce.triggerSave();
    });
</script>
{% endblock %}