{% extends 'domain/backend/layouts/base.html.twig' %}

{% block title %}New Post{% endblock %}
{% block body %}

    <div class="card container">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col">
                    <h4 class="card-title">Création de post</h4>
                    <a href="{{ path('back.post.index') }}" class="btn btn-primary float-end"><i
                                class="fa fa-arrow-rotate-back"></i> Retour</a>

                </div><!--end col-->
            </div>  <!--end row-->
        </div><!--end card-header-->
        <div class="card-body pt-0">
            {{ include('domain/backend/post/_form.html.twig', {'button_label': 'Modifier'}) }}

        </div><!--end card-body-->
    </div>


    <script>
        window.addEventListener('DOMContentLoaded', function () {
            const { ClassicEditor, Essentials, Paragraph, Bold, Italic, Font, Heading, Table } = CKEDITOR;

            ClassicEditor.create(document.querySelector('.editor'), {
                licenseKey: '{{ EDITOR_KEY }}',
                plugins: [Essentials, Paragraph, Bold, Italic, Font, Heading, Table],
                toolbar: [
                    'undo', 'redo', '|', 'bold', 'italic', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                ],
            })
                .then(editor => {
                    window.editor = editor;
                })
                .catch(error => {
                    console.error(error);
                });
        });

        document.querySelector('form').addEventListener('submit', function () {
            const editorData = window.editor.getData();
            document.querySelector('.editor').value = editorData;
        });
    </script>
{% endblock %}