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

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

        @can('index', $section->getForModelName())
            <script>
                (function () {
                    //Create a new instance of the sortable controller
                    let sectionId = "entities-search";
                    let rootSearchUlSelector = "{{ $siteSlug ? '#'.$siteSlug.'-'.$section->getSlug().'-searchlist' : '#'.$section->getSlug().'-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( $section->getSortable() )
                        dataSource = '/kms/api/' + (searchController.siteSlug !== '' ? searchController.siteSlug + '/' : '') + searchController.slug;
                    @else
                        let items = [];

                        @if($entities)
                            @foreach($entities as $entity)
                                @php /** @var \App\Komma\Kms\Core\Sections\SidebarListItem $entity */@endphp
                                items.push({
                                    id: "{{$entity->getId()}}",
                                    status: "{{$entity->getStatus()}}",
                                    routes: [],
                                    {{--thumbnail: "{{$entity->getThumbnail()}}",--}}
                                    model: {!! $entity->getModelToSearchTroughAsJson() !!},
                                    title: "{!! ucfirst($entity->getName()) !!}",
                                    children: []
                                });
                            @endForeach
                        @endif

                        dataSource = {};
                        dataSource.data = {
                            id: null,
                            status: "",
                            routes: [],
                            {{--thumbnail: "{{$entity->getThumbnail()}}",--}}
                            model: {!! (isset($entity) ) ? $entity->getModelToSearchTroughAsJson() : '{}' !!},
                            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>
        @endcan
    </div>
</section>