CodePress/admin/theme/default/views/pages/content-edit.twig

{% extends "layouts/admin.twig" %}

{% block title %}{{ fileName }} - CodePress Admin{% endblock %}

{% block content %}
<h2 class="mb-4"><i class="bi bi-pencil"></i> {{ fileName }}</h2>

<div class="card shadow-sm">
    <div class="card-body">
        <form method="POST" action="/admin/content-edit?file={{ file|url_encode }}" id="editor-form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <div class="row mb-3">
                <div class="col-md-4">
                    <label for="filename" class="form-label">Bestandsnaam</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="filename" name="filename" value="{{ fileName|replace({'.md': '', '.php': '', '.html': ''}) }}" required>
                        <span class="input-group-text">.{{ fileExt }}</span>
                    </div>
                    <small class="form-text text-muted">Alleen letters, cijfers, punten, underscores en streepjes.</small>
                </div>
                {% if isEditable %}
                <div class="col-md-4">
                    <label for="layout" class="form-label">Sjabloon / Layout <small class="text-muted">({{ activeThemeName|default('default') }} theme)</small></label>
                    <select class="form-select" id="layout" name="layout">
                        {% for key, layoutFile in themeLayouts %}
                        <option value="{{ key }}" {{ currentLayout == key ? 'selected' : '' }}>{{ key|replace({'_': ' '})|capitalize }}{% if key == themeDefaultLayout %} (standaard){% endif %}</option>
                        {% endfor %}
                    </select>
                </div>
                {% if availablePlugins is not empty %}
                <div class="col-md-4" id="plugin-section">
                    <label class="form-label d-block">Plugins</label>
                    <ul class="list-group list-group-flush" id="plugin-order-list">
                        {% for plugin in selectedPlugins %}
                        <li class="list-group-item d-flex align-items-center justify-content-between px-2 py-1" data-plugin="{{ plugin }}">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input plugin-checkbox" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off" checked>
                                <label class="form-check-label" for="plugin-{{ plugin }}">{{ plugin }}</label>
                            </div>
                            <div class="btn-group btn-group-sm plugin-arrows">
                                <button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-up" title="Omhoog"><i class="bi bi-arrow-up"></i></button>
                                <button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-down" title="Omlaag"><i class="bi bi-arrow-down"></i></button>
                            </div>
                        </li>
                        {% endfor %}
                        {% for plugin in availablePlugins %}
                        {% if plugin not in selectedPlugins %}
                        <li class="list-group-item d-flex align-items-center justify-content-between px-2 py-1" data-plugin="{{ plugin }}">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input plugin-checkbox" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off">
                                <label class="form-check-label" for="plugin-{{ plugin }}">{{ plugin }}</label>
                            </div>
                            <div class="btn-group btn-group-sm plugin-arrows">
                                <button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-up" title="Omhoog"><i class="bi bi-arrow-up"></i></button>
                                <button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-down" title="Omlaag"><i class="bi bi-arrow-down"></i></button>
                            </div>
                        </li>
                        {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                {% endif %}
            </div>
            {% if isEditable %}
            <div class="editor-toolbar" id="editor-toolbar"></div>
            <div class="editor-wrapper">
                <textarea name="content" id="editor-textarea" data-ext="{{ fileExt }}">{{ fileContent }}</textarea>
            </div>
            {% endif %}
            <div class="d-flex gap-2 mt-3">
                <button type="submit" class="btn btn-primary" title="Opslaan (Ctrl+S)">
                    <i class="bi bi-check-lg"></i> Opslaan
                </button>
                {% if isEditable %}
                <a href="/{{ currentLang }}{% if fileDir %}/{{ fileDir }}{% endif %}/{{ fileName|replace({'.md': '', '.php': '', '.html': ''}) }}" target="_blank" class="btn btn-outline-info" title="Open in nieuw tabblad">
                    <i class="bi bi-eye"></i> Preview
                </a>
                {% endif %}
                <a href="/admin/content?dir={{ fileDir|url_encode }}" class="btn btn-outline-secondary" id="back-btn">Terug</a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var backBtn = document.getElementById('back-btn');
    var filenameInput = document.getElementById('filename');
    var layoutSelect = document.getElementById('layout');
    var pluginSection = document.getElementById('plugin-section');
    var pluginList = document.getElementById('plugin-order-list');
    if (!backBtn) return;

    var sidebarLayouts = {{ sidebarLayouts|json_encode|raw }};
    var changed = false;

    function markChanged() {
        if (changed) return;
        changed = true;
        backBtn.innerHTML = '<i class="bi bi-x-circle"></i> Annuleren';
        backBtn.classList.remove('btn-outline-secondary');
        backBtn.classList.add('btn-outline-danger');
    }

    if (filenameInput) {
        filenameInput.addEventListener('input', markChanged);
    }

    function updatePluginVisibility() {
        if (!layoutSelect || !pluginSection) return;
        var hasSidebar = sidebarLayouts.indexOf(layoutSelect.value) !== -1;
        pluginSection.style.display = hasSidebar ? '' : 'none';
        pluginSection.querySelectorAll('.plugin-checkbox').forEach(function(cb) {
            cb.disabled = !hasSidebar;
        });
    }

    // Arrow state: grey out and disable at first/last position (not hidden)
    function updateArrows() {
        if (!pluginList) return;
        var items = pluginList.querySelectorAll('li[data-plugin]');
        items.forEach(function(item, i) {
            var upBtn = item.querySelector('.plugin-up');
            var downBtn = item.querySelector('.plugin-down');
            var upDisabled = (i === 0);
            var downDisabled = (i === items.length - 1);

            if (upBtn) {
                upBtn.disabled = upDisabled;
                upBtn.style.opacity = upDisabled ? '0.4' : '';
                upBtn.style.pointerEvents = upDisabled ? 'none' : '';
            }
            if (downBtn) {
                downBtn.disabled = downDisabled;
                downBtn.style.opacity = downDisabled ? '0.4' : '';
                downBtn.style.pointerEvents = downDisabled ? 'none' : '';
            }
        });
    }

    // Update frontmatter in the editor (layout and plugins together)
    function updateFrontmatter() {
        var editor = document.getElementById('editor-textarea');
        if (!editor) return;

        var cm = window.codeMirrorEditor;
        var content = cm ? cm.getValue() : editor.value;
        var newLayout = layoutSelect ? layoutSelect.value : '';

        // Get current plugin order (only checked, in DOM order)
        var pluginOrder = [];
        if (pluginList) {
            pluginList.querySelectorAll('li[data-plugin]').forEach(function(item) {
                var cb = item.querySelector('.plugin-checkbox');
                if (cb && cb.checked) {
                    pluginOrder.push(item.getAttribute('data-plugin'));
                }
            });
        }
        var pluginsValue = pluginOrder.join(', ');

        var fmMatch = content.match(/^---\n([\s\S]*?)\n---/);
        if (fmMatch) {
            var frontmatter = fmMatch[1];

            if (newLayout) {
                if (/^layout:\s*.+$/m.test(frontmatter)) {
                    frontmatter = frontmatter.replace(/^layout:\s*.+$/m, 'layout: ' + newLayout);
                } else {
                    frontmatter = 'layout: ' + newLayout + '\n' + frontmatter;
                }
            }

            if (/^plugins:\s*.+$/m.test(frontmatter)) {
                if (pluginsValue) {
                    frontmatter = frontmatter.replace(/^plugins:\s*.+$/m, 'plugins: ' + pluginsValue);
                } else {
                    frontmatter = frontmatter.replace(/^plugins:\s*.*\n?/m, '');
                }
            } else if (pluginsValue) {
                frontmatter = 'plugins: ' + pluginsValue + '\n' + frontmatter;
            }

            content = content.replace(/^---\n([\s\S]*?)\n---/, '---\n' + frontmatter + '\n---');
        } else {
            var fm = '';
            if (newLayout) fm += 'layout: ' + newLayout + '\n';
            if (pluginsValue) fm += 'plugins: ' + pluginsValue + '\n';
            if (fm) {
                content = '---\n' + fm + '---\n\n' + content;
            }
        }

        if (cm) {
            cm.setValue(content);
        } else {
            editor.value = content;
        }
    }

    // Layout change
    if (layoutSelect) {
        layoutSelect.addEventListener('change', function () {
            updatePluginVisibility();
            updateFrontmatter();
            markChanged();
        });
    }

    window.__onContentChange = markChanged;

    // Plugin order: move up/down + checkbox change
    if (pluginList) {
        pluginList.addEventListener('click', function (e) {
            var upBtn = e.target.closest('.plugin-up');
            var downBtn = e.target.closest('.plugin-down');
            if (!upBtn && !downBtn) return;
            if (upBtn && upBtn.disabled) return;
            if (downBtn && downBtn.disabled) return;

            var item = e.target.closest('li[data-plugin]');
            if (!item) return;

            if (upBtn && item.previousElementSibling) {
                pluginList.insertBefore(item, item.previousElementSibling);
            } else if (downBtn && item.nextElementSibling) {
                pluginList.insertBefore(item, item.nextElementSibling.nextElementSibling);
            }

            updateArrows();
            updateFrontmatter();
            markChanged();
        });

        // Plugin checkbox toggle
        pluginList.addEventListener('change', function (e) {
            if (e.target.classList.contains('plugin-checkbox')) {
                updateFrontmatter();
                markChanged();
            }
        });
    }

    // Initialize
    updatePluginVisibility();
    updateArrows();
});
</script>
{% endblock %}