<ul id="{!! ($siteSlug.'-' ? $siteSlug : '') !!}{!! $slug !!}" class="sortable" data-active-id="{{$id or null}}" data-site-slug="{{$siteSlug or null}}" data-slug="{{$slug or null}}">

</ul>

<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 : '') !!}{!! $slug !!}';
        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>