<ul id="{!! ($siteSlug.'-' ? $siteSlug : '') !!}{!! $section->getSlug() !!}" class="sortable" data-active-id="{{$section->getModelId()}}" data-site-slug="{{$siteSlug}}" data-slug="{{$section->getSlug()}}" dusk="sortable_list">

</ul>

@can('index', $section->getForModelName())
    <div class="entities-order">
        <span class="sortable-button enable-sortable">
            Verander volgorde
        </span>
        <span class="sortable-button save-order">
            Volgorde toepassen
        </span>
    </div>

    <script>
        (function() {
            //Create a new instance of the sortable controller
            let rootUlSelector = '#{!! ($siteSlug.'-' ? $siteSlug : '') !!}{!! $section->getSlug() !!}';
            let sortableController = new SortableController(rootUlSelector);

            //Define Urls to use with the controller
            let apiUrl = '/kms/api/' + (sortableController.siteSlug !== '' ? sortableController.siteSlug+'/' : '') + sortableController.slug;
            let editEntitiesBaseUrl = '/kms/' + (sortableController.siteSlug !== '' ? sortableController.siteSlug+'/' : '') + sortableController.slug;

            //Initialize the controller so that it knows what to do
            sortableController.init(apiUrl, editEntitiesBaseUrl);

            //Load the HTML elements in the ul
            let loadedPromise = sortableController.load();
            loadedPromise.then(function (rootUl) {
                // console.log('Sortable controller loaded items sucessfully');
            }).catch(function (errorMessage) {
                console.error(errorMessage)
            });

            //Enable disable sorting button behaviour
            let sortableButtonQuery = '.entities-order .sortable-button';
            document.querySelector(sortableButtonQuery + '.enable-sortable').addEventListener('click', function () {
                sortableController.enableSortable();
                document.querySelector(sortableButtonQuery + '.save-order').classList.add('show');
            });

            document.querySelector(sortableButtonQuery + '.save-order').addEventListener('click', function () {
                sortableController.disableSortable();
                document.querySelector(sortableButtonQuery + '.save-order').classList.remove('show');
            });
        })()
    </script>
@endcan