<?php $this->layout('system::layout/default') ?>
<div class="row">
    <div class="m-sm-auto m-md-auto m-lg-0 col-sm-8 col-md-8 col-lg-7 col-xl-8">
        <div class="card shadow border-0 border-radius-12">
            <div class="card-body">

                <?php if (! empty($data['errors'])): ?>
                    <div>
                        <?= $this->fetch(
                            'system::app/alert',
                            [
                                'alert_type' => 'alert-danger',
                                'alert'      => $data['errors'],
                            ]
                        ) ?>
                    </div>
                <?php endif ?>

                <h4 class="card-title"><?= $page_title ?></h4>
                <form action="<?= $data['action_url'] ?>" method="post">
                    <div class="form-group">
                        <label for="name"><?= __('Article name') ?></label>
                        <input type="text"
                               class="form-control"
                               maxlength="255"
                               name="name"
                               id="name"
                               required
                               value="<?= $data['fields']['name'] ?>"
                               placeholder="<?= __('Article name') ?>"
                        >
                    </div>
                    <div class="form-group">
                        <label for="page_title"><?= __('Page title') ?></label>
                        <input type="text"
                               class="form-control"
                               maxlength="255"
                               name="page_title"
                               id="page_title"
                               required
                               value="<?= $data['fields']['page_title'] ?>"
                               placeholder="<?= __('Page title') ?>"
                        >
                    </div>
                    <div class="form-group">
                        <label for="code"><?= __('Article code') ?></label>
                        <input type="text"
                               class="form-control"
                               maxlength="255"
                               name="code"
                               id="code"
                               value="<?= $data['fields']['code'] ?>"
                               placeholder="<?= __('Article code') ?>"
                        >
                        <div class="small text-muted"><?= __('Leave it empty for automatic generation') ?></div>
                    </div>
                    <div class="form-group">
                        <label for="keywords"><?= __('Keywords') ?></label>
                        <input type="text"
                               class="form-control"
                               maxlength="255"
                               name="keywords"
                               id="keywords"
                               value="<?= $data['fields']['keywords'] ?>"
                               placeholder="<?= __('Keywords') ?>"
                        >
                    </div>
                    <div class="form-group">
                        <label for="description"><?= __('Description') ?></label>
                        <input type="text"
                               class="form-control"
                               maxlength="255"
                               name="description"
                               id="description"
                               value="<?= $data['fields']['description'] ?>"
                               placeholder="<?= __('Description') ?>"
                        >
                    </div>
                    <div class="form-group p-no-margin">
                        <label for="preview_text"><?= __('Preview text') ?></label>
                        <textarea id="preview_text" class="form-control preview_text_editor" name="preview_text"><?= $this->e($data['fields']['preview_text']) ?></textarea>
                    </div>
                    <div class="form-group p-no-margin">
                        <label for="text"><?= __('Text') ?></label>
                        <textarea id="text" class="form-control editor" name="text"><?= $this->e($data['fields']['text']) ?></textarea>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-primary"><?= __('Save') ?></button>
                        <a href="<?= $data['back_url'] ?>" class="btn btn-outline-primary ml-2"><?= __('Back') ?></a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php $this->push('scripts') ?>
<?php if ($locale !== 'en'): ?>
    <script src="<?= $this->asset('blog/ckeditor5/translations/' . $locale . '.js') ?>"></script>
<?php endif; ?>
<script src="<?= $this->asset('blog/ckeditor5/ckeditor.js') ?>"></script>
<script src="/modules/blog/ckfinder/ckfinder.js"></script>
<script>
    // Disable prism
    Prism.manual = true;
    var ckeditor_settings = {
        ckfinder: {
            uploadUrl: '/modules/blog/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
        },
        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'link',
                'fontColor',
                'bulletedList',
                'numberedList',
                'removeFormat',
                '|',
                'alignment',
                'indent',
                'outdent',
                '|',
                'codeBlock',
                'imageUpload',
                'CKFinder',
                'blockQuote',
                'insertTable',
                'mediaEmbed',
                'undo',
                'redo'
            ]
        },
        language: '<?= $locale ?>',
        image: {
            toolbar: [
                'imageTextAlternative',
                'imageStyle:full',
                'imageStyle:side'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells',
                'tableProperties',
                'tableCellProperties'
            ]
        },
        codeBlock: {
            languages: [
                {language: 'php', label: 'PHP', class: 'language-php line-numbers'},
                {language: 'css', label: 'CSS', class: 'language-css line-numbers'},
                {language: 'javascript', label: 'JavaScript', class: 'language-javascript line-numbers'},
                {language: 'html', label: 'HTML', class: 'language-html line-numbers'},
                {language: 'sql', label: 'SQL', class: 'language-sql line-numbers'},
                {language: 'xml', label: 'XML', class: 'language-xml line-numbers'},
            ]
        },
        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: 'alertSuccess',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-success']
                    },
                    title: 'alert-success',
                    class: 'alert alert-success',
                },
                {
                    model: 'alertSuccessInline',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-success', 'd-inline-block']
                    },
                    title: 'alert-success inline',
                    class: 'alert alert-success',
                },
                {
                    model: 'alertInfo',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-info']
                    },
                    title: 'alert-info',
                    class: 'alert alert-success',
                },
                {
                    model: 'alertInfoInline',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-info', 'd-inline-block']
                    },
                    title: 'alert-info inline',
                    class: 'alert alert-success',
                },
                {
                    model: 'alertDanger',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-danger']
                    },
                    title: 'alert-danger',
                    class: 'alert alert-danger',
                },
                {
                    model: 'alertDangerInline',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-danger', 'd-inline-block']
                    },
                    title: 'alert-danger inline',
                    class: 'alert alert-danger',
                },
                {
                    model: 'alertWarning',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-warning']
                    },
                    title: 'alert-warning',
                    class: 'alert alert-warning',
                },
                {
                    model: 'alertWarningInline',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-warning', 'd-inline-block']
                    },
                    title: 'alert-warning inline',
                    class: 'alert alert-warning',
                },
            ]
        },
        licenseKey: '',
    };

    ClassicEditor
        .create(document.querySelector('.editor'), ckeditor_settings)
        .then(editor => {
            window.editor = editor;
        })
        .catch(error => {
            console.error(error);
        });
    ClassicEditor
        .create(document.querySelector('.preview_text_editor'), ckeditor_settings)
        .then(editor => {
            window.editor = editor;
        })
        .catch(error => {
            console.error(error);
        });
</script>
<?php $this->stop(); ?>
<?php $this->push('styles') ?>
<link rel="stylesheet" href="<?= $this->asset('blog/css/blog.css', true) ?>">
<?php $this->stop(); ?>
