xamxam/app/templates/admin/contenus-edit.php

<main id="main-content" class="full-editor-page">
    <h1><a href="/admin/contenus.php" class="admin-back-btn" title="Retour"><img src="/assets/icons/arrow-left-circle.svg" width="32" height="32" alt="" aria-hidden="true"></a> Éditer : <?= htmlspecialchars($editTitle) ?></h1>

    <?php if ($editType === 'about_page'): ?>

    <!-- ── Markdown content ──────────────────────────────────────────────── -->
    <h2>Contenu de la page</h2>
    <form action="/admin/actions/page.php" method="post" class="admin-form admin-form--full-editor">
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION["csrf_token"]) ?>">
        <input type="hidden" name="slug" value="about">

        <div class="full-editor-toolbar">
            <span class="full-editor-label">Contenu (Markdown) :</span>
            <button type="button" class="btn btn--sm"
                    hx-get="/admin/markdown-cheatsheet-fragment.php"
                    hx-target="#md-cheatsheet-container"
                    hx-swap="innerHTML"
                    hx-on::after-request="document.getElementById('md-cheatsheet-dialog').showModal()">
                Aide Markdown
            </button>
            <button type="submit" class="btn btn--primary btn--sm">Enregistrer</button>
        </div>
        <input type="hidden" id="content" name="content"
               value="<?= htmlspecialchars($initialContent) ?>">
        <div id="editor"></div>
    </form>

    <!-- ── Contacts ──────────────────────────────────────────────────────── -->
    <h2 style="margin-top:3rem;">Contacts</h2>
    <?php
    $aproposKey = 'contacts';
    $groups = $aboutContacts ?? [];
    include APP_ROOT . '/templates/admin/apropos-groups-form.php';
    ?>

    <!-- ── Sidebar links ─────────────────────────────────────────────────── -->
    <h2 style="margin-top:3rem;">Liens de la barre latérale</h2>
    <form action="/admin/actions/apropos.php" method="post" class="admin-form" id="sidebar-links-form"
          hx-post="/admin/actions/apropos.php"
          hx-trigger="change delay:1500ms, input delay:1500ms"
          hx-swap="none"
          hx-on::after-request="handleAutosaveResponse(event)">
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
        <input type="hidden" name="apropos_key" value="sidebar_links">

        <?php foreach ($sidebarLinks as $li => $link): ?>
        <div class="sidebar-link-row">
            <div class="sidebar-link-fields">
                <div>
                    <label for="sl_<?= $li ?>_label">Label :</label>
                    <input type="text" id="sl_<?= $li ?>_label"
                           name="links[<?= $li ?>][label]"
                           value="<?= htmlspecialchars($link['label'] ?? '') ?>"
                           placeholder="Site de l'erg">
                </div>
                <div>
                    <label for="sl_<?= $li ?>_url">URL :</label>
                    <input type="url" id="sl_<?= $li ?>_url"
                           name="links[<?= $li ?>][url]"
                           value="<?= htmlspecialchars($link['url'] ?? '') ?>"
                           placeholder="https://erg.be">
                </div>
            </div>
            <button type="button" class="admin-icon-btn admin-icon-btn--delete remove-sidebar-link-btn"
                    title="Supprimer ce lien">
                <img src="/assets/icons/trash-slash.svg" width="20" height="20" alt="" aria-hidden="true">
            </button>
        </div>
        <?php endforeach; ?>

        <button type="button" class="btn btn--primary btn--sm" id="add-sidebar-link-btn">+ Ajouter un lien</button>

        <div class="autosave-status" data-autosave-status></div>
    </form>

    <template id="sidebar-link-tpl">
        <div class="sidebar-link-row">
            <div class="sidebar-link-fields">
                <div>
                    <label>Label :</label>
                    <input type="text" name="links[{{li}}][label]" placeholder="Site de l'erg">
                </div>
                <div>
                    <label>URL :</label>
                    <input type="url" name="links[{{li}}][url]" placeholder="https://erg.be">
                </div>
            </div>
            <button type="button" class="admin-icon-btn admin-icon-btn--delete remove-sidebar-link-btn"
                    title="Supprimer ce lien">
                <img src="/assets/icons/trash-slash.svg" width="20" height="20" alt="" aria-hidden="true">
            </button>
        </div>
    </template>

    <script>
    (function() {
        var form = document.getElementById('sidebar-links-form');
        var tpl = document.getElementById('sidebar-link-tpl');
        var tplHtml = tpl.innerHTML;

        function reindexLinks() {
            var rows = form.querySelectorAll('.sidebar-link-row');
            rows.forEach(function(row, i) {
                row.querySelectorAll('input').forEach(function(inp) {
                    if (inp.name) {
                        inp.name = inp.name.replace(/links\[\d+\]/, 'links[' + i + ']');
                    }
                    if (inp.id) {
                        inp.id = inp.id.replace(/sl_\d+/, 'sl_' + i);
                    }
                });
                row.querySelectorAll('label[for]').forEach(function(lbl) {
                    lbl.setAttribute('for', lbl.getAttribute('for').replace(/sl_\d+/, 'sl_' + i));
                });
            });
        }

        // Event delegation for remove buttons (including dynamically added)
        form.addEventListener('click', function(e) {
            if (!e.target.closest('.remove-sidebar-link-btn')) return;
            e.preventDefault();
            e.target.closest('.sidebar-link-row').remove();
            reindexLinks();
        });

        // Add button
        var addBtn = document.getElementById('add-sidebar-link-btn');
        addBtn.addEventListener('click', function() {
            var rows = form.querySelectorAll('.sidebar-link-row');
            var idx = rows.length;
            var html = tplHtml.split('{{li}}').join(idx);
            this.insertAdjacentHTML('beforebegin', html);
        });
    })();
    </script>

    <?php elseif ($editType === 'page' && $pageSlug !== 'about'): ?>
    <form action="/admin/actions/page.php" method="post" class="admin-form admin-form--full-editor">
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION["csrf_token"]) ?>">
        <input type="hidden" name="slug" value="<?= htmlspecialchars($pageSlug) ?>">

        <div class="full-editor-toolbar">
            <span class="full-editor-label">Contenu (Markdown) :</span>
            <button type="button" class="btn btn--sm"
                    hx-get="/admin/markdown-cheatsheet-fragment.php"
                    hx-target="#md-cheatsheet-container"
                    hx-swap="innerHTML"
                    hx-on::after-request="document.getElementById('md-cheatsheet-dialog').showModal()">
                Aide Markdown
            </button>
            <button type="submit" class="btn btn--primary btn--sm">Enregistrer</button>
        </div>
        <input type="hidden" id="content" name="content"
               value="<?= htmlspecialchars($initialContent) ?>">
        <div id="editor"></div>
    </form>

    <?php elseif ($editType === 'form_help'): ?>
    <p class="param-note">Ce texte est affiché dans le formulaire de soumission des étudiant·es (lien de partage). Supporte le Markdown.</p>
    <form action="/admin/actions/form-help.php" method="post" class="admin-form admin-form--full-editor">
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
        <input type="hidden" name="form_help_key" value="<?= htmlspecialchars($formHelpKey) ?>">

        <div class="full-editor-toolbar">
            <span class="full-editor-label">Contenu (Markdown) :</span>
            <button type="button" class="btn btn--sm"
                    hx-get="/admin/markdown-cheatsheet-fragment.php"
                    hx-target="#md-cheatsheet-container"
                    hx-swap="innerHTML"
                    hx-on::after-request="document.getElementById('md-cheatsheet-dialog').showModal()">
                Aide Markdown
            </button>
            <button type="submit" class="btn btn--primary btn--sm">Enregistrer</button>
        </div>
        <input type="hidden" id="content" name="content"
               value="<?= htmlspecialchars($initialContent) ?>">
        <div id="editor"></div>
    </form>

    <?php else: ?>
    <?php
    $groups = is_array($value) ? $value : [];
    ?>
    <?php include APP_ROOT . '/templates/admin/apropos-groups-form.php'; ?>
    <?php endif; ?>
</main>