<?php $this->layout('system::layout/default') ?>

<?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">
        <input type="hidden" name="active" value="0">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" name="active" value="1" id="active" <?= $data['fields']['active'] ? 'checked' : '' ?>>
            <label class="custom-control-label" for="active"><?= __('Active') ?></label>
        </div>
    </div>
    <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="date_active_from"><?= __('Active from') ?></label>
        <input type="text"
               class="form-control flatpickr_time"
               name="active_from"
               id="active_from"
               required
               value="<?= $data['fields']['active_from'] ?>"
               placeholder="<?= __('Active from') ?>"
        >
    </div>
    <div class="form-group">
        <label for="date_active_to"><?= __('Active to') ?></label>
        <input type="text"
               class="form-control flatpickr_time"
               name="active_to"
               id="active_to"
               required
               value="<?= $data['fields']['active_to'] ?>"
               placeholder="<?= __('Active to') ?>"
        >
    </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">
        <label for="tags"><?= __('Tags') ?></label>
        <input type="text"
               class="form-control"
               maxlength="255"
               name="tags"
               id="tags"
               value="<?= $data['fields']['tags'] ?>"
               placeholder="<?= __('Tags') ?>"
        >
        <div class="small text-muted"><?= __('Enter words or phrases separated by commas') ?></div>
    </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>

<?php $this->push('scripts') ?>
<?php if ($locale !== 'en'):
    try {
        ?>
        <script src="<?= $this->asset('ckeditor5/translations/' . $locale . '.js') ?>"></script>
        <?php
    } catch (Exception $exception) {
    }
    ?>
<?php endif; ?>
<script src="<?= $this->asset('ckeditor5/ckeditor.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',
                'blockQuote',
                'insertTable',
                'undo',
                'redo'
            ]
        },
        language: '<?= $locale ?>',
        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: 'alertInfo',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-info']
                    },
                    title: 'alert-info',
                    class: 'alert alert-success',
                },
                {
                    model: 'alertDanger',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-danger']
                    },
                    title: 'alert-danger',
                    class: 'alert alert-danger',
                },
                {
                    model: 'alertWarning',
                    view: {
                        name: 'div',
                        classes: ['alert', 'alert-warning']
                    },
                    title: 'alert-warning',
                    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(); ?>

