(function () {

    const layout = document.getElementById('page-layout');

    document.querySelectorAll('.add-section').forEach(btn => {
        btn.onclick = () => addSection(btn.dataset.type);
    });

    function addSection(type) {

        const item = document.createElement('div');
        item.className = 'border rounded p-3 mb-2 section-item';

        item.innerHTML = `
            <input type="hidden" name="layout[][type]" value="${type}">
            <input type="hidden" name="layout[][enabled]" value="1">

            <strong>${type}</strong>

            <div class="float-end">
                <button type="button" class="btn btn-sm btn-outline-danger remove">×</button>
            </div>
        `;

        item.querySelector('.remove').onclick = () => item.remove();
        layout.appendChild(item);
    }

})();
