<section class="search" id="entities-search">

    <div class="search-field">
        <form>
            <input type="text" autocomplete="off" name="search" placeholder="@lang('kms/global.search')...">
        </form>
    </div>
    <p class="search-result-text">
        @lang('kms/global.searchResults'): <span id="search-result-counter"></span>
    </p>
    <div class="entities-list">
        <ul id="{!! $siteSlug ? $siteSlug."-".$slug : $slug !!}-searchlist" class="searchlist" data-active-id="{{$id or null}}"
            data-site-slug="{{$siteSlug or null}}" data-slug="{{$slug or null}}">
        </ul>

        <script>
            (function () {
                //Create a new instance of the sortable controller
                let sectionId = "entities-search";
                let rootSearchUlSelector = "{{ $siteSlug ? '#'.$siteSlug.'-'.$slug.'-searchlist' : '#'.$slug.'-searchlist' }}";

                let inputSelector = "input[name='search']";
                let resultCounterId = "search-result-counter";
                let mainUlId = "main-entities-list";
                let searchController = new SearchController(sectionId, rootSearchUlSelector, inputSelector, mainUlId, resultCounterId);

                //Define Urls to use with the controller
                let dataSource;
                @if($sortable)
                    dataSource = '/kms/api/' + (searchController.siteSlug !== '' ? searchController.siteSlug + '/' : '') + searchController.slug;
                @else
                    let items = [];

                    @if($entities)
                        @foreach($entities as $entity)
                            items.push({
                                id: "{{$entity->getId()}}",
                                status: "{{$entity->getStatus()}}",
                                routes: [],
                                {{--thumbnail: "{{$entity->getThumbnail()}}",--}}
                                title: "{{ucfirst($entity->getName())}}",
                                children: []
                            });
                        @endForeach
                    @endif

                    dataSource = {};
                    dataSource.data = [];
                    dataSource.data[0] = {
                        id: null,
                        status: "",
                        routes: [],
                        {{--thumbnail: "{{$entity->getThumbnail()}}",--}}
                        title: "",
                        children: items
                    };
                @endif

                let editEntitiesBaseUrl = '/kms/' + (searchController.siteSlug !== '' ? searchController.siteSlug + '/' : '') + searchController.slug;

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

                //Load the HTML elements in the ul
                let loadedPromise = searchController.load();
                loadedPromise.then(function (rootUl) {
                    // console.log('Search controller loaded items sucessfully');
                }).catch(function (errorMessage) {
                    console.error(errorMessage)
                });
            })();
        </script>
    </div>
</section>