{{--<div ng-controller="SortableTree" ng-class="{'sorting': isSorting}"--}}
{{--     ng-init="url = '{{{route('kms.{site}.'.$slug.'.index', ['site' => $siteSlug]) }}}';" data-slug="{!!$slug!!}"--}}
     {{--ng-init="url = '{{{route($slug.'.index', ['site' => $siteSlug]) }}}';" data-slug="{!!$slug!!}"--}}
     {{--data-siteslug="{!!$siteSlug!!}">--}}

    {{--<script type="text/ng-template" id="nodes_renderer.html">--}}
        {{--<div ui-tree-handle class="tree-node tree-node-content" ng-click="openLink(node.id)">--}}
            {{--<span class="color-status @{{node.status}}">&nbsp;</span>--}}
            {{--<div class="icon">--}}
                {{--<img ng-if="node.thumbnail" ng-src="@{{node.thumbnail}}" ng-show="node.thumbnail"/>--}}
                {{--<span ng-if="!node.thumbnail">@{{node.title.substring(0,1)}}</span>--}}
            {{--</div>--}}
            {{--@{{ node.title }}--}}

            {{--<a class="triangle" data-nodrag ng-click="toggle(this); $event.stopPropagation()"--}}
               {{--ng-if="node.children.length"></a>--}}
        {{--</div>--}}

        {{--<ul ng-if="node.children.length" ui-tree-nodes="" ng-model="node.children" ng-class="{show: collapsed}">--}}
            {{--<li>ng-repeat="node in node.children" ui-tree-node ng-include="'nodes_renderer.html'"--}}
                {{----}}
                {{--@if(isset($id) && $id)--}}
                {{--ng-class="{active:node.id == {{$id}}}"--}}
                {{--id="item-@{{node.id}}"--}}
                    {{--@endif</li>--}}
        {{--</ul>--}}
    {{--</script>--}}

    {{--<div ui-tree="treeOptions" data-drag-enabled="isSorting" id="tree-root">--}}
        {{--<ul ui-tree-nodes="" ng-model="data">--}}
            {{--<ling-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"--}}
                {{----}}
                {{--@if(isset($id) && $id)--}}
                    {{--ng-class="{active:node.id == {{$id}}}"--}}
                    {{--id="item-@{{node.id}}"--}}
                {{--@endif></li>--}}
        {{--</ul>--}}
    {{--</div>--}}

{{--</div>--}}






{{--<ul class="sortable">--}}
    {{--<li><a href="#">Item 1</a><ul class="sortable" style="display: none"></ul></li>--}}
    {{--<li><a href="#">Item 2</a><ul class="sortable" style="display: none"></ul></li>--}}
    {{--<li>class="entities-list-item has-children">--}}
        {{--<a href="#">Item 3</a>--}}
        {{--<ul class="sortable" style="display: none">--}}
            {{--<li><a href="#">Item 1.1</a><ul class="sortable" style="display: none"></ul></li>--}}
            {{--<li><a href="#">Item 1.2</a><ul class="sortable" style="display: none"></ul></li>--}}
        {{--</ul>--}}
    {{--</li>--}}
    {{--<li><a href="#">Item 4</a><ul class="sortable" style="display: none"></ul></li>--}}
    {{--<li><a href="#">Item 5</a><ul class="sortable" style="display: none"></ul></li>--}}
    {{--<li>class="entities-list-item has-children">--}}
        {{--<a href="nu.nl">Item 6</a>--}}
        {{--<ul class="sortable" style="display: none">--}}
            {{--<li><a href="#">Item 6.1</a><ul class="sortable" style="display: none"></ul></li>--}}
            {{--<li><a href="#">Item 6.2</a><ul class="sortable" style="display: none"></ul></li>--}}
        {{--</ul>--}}
    {{--</li>--}}
    {{--<li><a href="#">Item 7</a><ul class="sortable" style="display: none"></ul></li>--}}
{{--</ul>--}}


<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;

        // console.log('sortable api url: '+apiUrl+ ' siteSlug: "'+sortableController.siteSlug+'"');

        //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>