@typeparam TItem where TItem : WatchIt.Common.Query.IQueryOrderable<TItem>
@typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters<TItem>


           
<CascadingValue Value="this">
    <div class="vstack gap-3">
        <div class="rounded-3 panel panel-regular p-2 px-3 z-3">
            <div class="container-grid">
                <div class="row gx-3">
                    <div class="col">
                        <h2 class="m-0">@(Title)</h2>
                    </div>
                    <div class="col-auto align-self-center">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">Order by</span>
                            <select class="form-select" @onchange="SortingOptionChanged">
                                @foreach (KeyValuePair<string, string> sortingOption in SortingOptions)
                                {
                                    <option value="@(sortingOption.Key)">@(sortingOption.Value)</option>
                                }
                            </select>
                            <input type="checkbox" class="btn-check" id="sortingAscending" autocomplete="off" @onchange="SortingAscendingChanged">
                            <label class="btn btn-outline-secondary" for="sortingAscending">&#8595;&#xFE0E;</label>
                        </div>
                    </div>
                    <div class="col-auto align-self-center">
                        <div class="d-flex">
                            <Dropdown RightAligned>
                                <DropdownToggle Color="Color.Secondary" Size="Size.Small">
                                    <i class="fa fa-filter"></i>
                                </DropdownToggle>
                                <DropdownMenu Class="p-2">
                                    <DropdownHeader>Filters</DropdownHeader>
                                    <DropdownDivider/>
                                    @(ChildContent)
                                    <DropdownDivider/>
                                    <button class="btn btn-secondary btn-sm w-100" @onclick="FilterApplied">Apply</button>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        @if (_loaded)
        {
            if (string.IsNullOrWhiteSpace(_error))
            {
                if (_items.Count > 0)
                {
                    foreach (TItem item in _items)
                    {
                        <div role="button" class="rounded-3 panel panel-regular p-2" @onclick="@(() => NavigationManager.NavigateTo(string.Format(UrlIdTemplate, IdSource(item))))">
                            <ListItemComponent Id="@(IdSource(item))"
                                               Name="@(NameSource(item))"
                                               AdditionalNameInfo="@(AdditionalNameInfoSource(item))"
                                               Rating="@(RatingSource(item))"
                                               PictureDownloadingTask="@(PictureDownloadingTask)"/>
                        </div>
                    }
                    if (!_allItemsLoaded)
                    {
                        <div role="button" class="rounded-3 panel panel-regular p-3" @onclick="DownloadItems">
                            <div class="d-flex justify-content-center">
                                @if (!_itemsLoading)
                                {
                                    <strong>Load more</strong>
                                }
                                else
                                {
                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                    <strong>Loading...</strong>
                                }
                            </div>
                        </div>
                    }
                }
                else
                {
                    <div class="panel">
                        <div class="d-flex justify-content-center">
                            <span>No items found</span>
                        </div>
                    </div>
                }
            }
            else
            {
                <ErrorPanelComponent ErrorMessage="@_error"/>
            }
        }
        else
        {
            <div class="m-5">
                <LoadingComponent/>
            </div>
        }
    </div>
</CascadingValue>