@extends('layouts.backend')

@section('content')
<form action="{{route('bo.pictos.store')}}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">
            <a href="{{route('bo.home')}}" class="h2 text-decoration-none"> < </a>
            {{ __('Pictogrammes') }} <small class="text-muted">{{ __('Création') }}</small>
        </h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <button type="submit" class="btn btn-sm btn-primary">{{ __('Enregistrer') }}</a>
        </div>
    </div>

    @include('back.pictos.form-inputs')

</form>
@endsection

@section('scripts')
<script type="text/javascript">
    var editorConfig = {
        removePlugins: ["Image", "ImageCaption", "ImageStyle", "ImageToolbar", "ImageUpload"],
        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'blockQuote', 'insertTable', '|', 'undo', 'redo'],
        heading: {
            options: [{
                    model: 'paragraph',
                    title: 'Paragraph',
                    class: 'ck-heading_paragraph'
                },
                {
                    model: 'heading1',
                    view: 'h1',
                    title: 'Heading 1',
                    class: 'ck-heading_heading1'
                },
                {
                    model: 'heading2',
                    view: 'h2',
                    title: 'Heading 2',
                    class: 'ck-heading_heading2'
                },
                {
                    model: 'heading3',
                    view: 'h3',
                    title: 'Heading 3',
                    class: 'ck-heading_heading3'
                },
                {
                    model: 'heading4',
                    view: 'h4',
                    title: 'Heading 4',
                    class: 'ck-heading_heading4'
                }
            ]
        },
        table: {
            contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
        }
    };
    ClassicEditor
        .create(document.querySelector('#text'), editorConfig)
        .catch(error => {
            console.error(error);
        });
</script>
@endsection