@using Blazorise
@using WatchIt.Website.Components.Subcomponents.Common
@using WatchIt.Website.Components.Panels.Common

@typeparam TItem
@typeparam TEntity where TEntity : class        
@typeparam TQuery where TQuery : WatchIt.DTO.Query.IFilterQuery<TEntity>

@inherits Component


           
<CascadingValue Value="this">
    <div class="vstack gap-3">
        <div class="panel panel-section-header z-3">
            <div class="container-grid">
                <div class="row gx-3">
                    <div class="col">
                        <h3 class="fw-bold m-0">@(Title)</h3>
                    </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)
                    {
                        long id = IdFunc(item);
                        string url = string.Format(UrlIdTemplate, id);
                        <div class="panel p-2">
                            <VerticalListItem Name="@(NameFunc(item))"
                                              AdditionalInfo="@(AdditionalNameInfoFunc(item))"
                                              PicturePlaceholder="@(PicturePlaceholder)"
                                              PictureFunc="@(() => PictureFunc(item))"
                                              GlobalRating="@(GlobalRatingFunc(item))"
                                              SecondaryRatingTitle="@(SecondaryRatingTitle)"
                                              GetGlobalRatingMethod="@(() => GetGlobalRatingMethod(item))"
                                              GetSecondaryRatingMethod="@(GetSecondaryRatingMethod is not null ? () => GetSecondaryRatingMethod(item) : null)"
                                              GetYourRatingMethod="@(GetYourRatingMethod is not null ? async userId => (int?)(await GetYourRatingMethod(item, userId))?.Rating : null)"
                                              PutYourRatingMethod="@(PutYourRatingMethod is not null ? request => PutYourRatingMethod(item, request) : null)"
                                              DeleteYourRatingMethod="@(DeleteYourRatingMethod is not null ? () => DeleteYourRatingMethod(item) : null)"
                                              ItemUrl="@(url)"/>
                        </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
            {
                <ErrorPanel ErrorMessage="@_error"/>
            }
        }
        else
        {
            <div class="m-5">
                <Loading/>
            </div>
        }
    </div>
</CascadingValue>