@using static BootstrapBlazor.Shared.Samples.ListViews;
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.ListViews> Localizer

<ListView TItem="Product" Items="@Products" OnListViewItemClick="OnListViewItemClick">
    <HeaderTemplate>
        <div>@Localizer["ProductListText"]</div>
    </HeaderTemplate>
    <BodyTemplate>
        <Card>
            <BodyTemplate>
                <img src="@context.ImageUrl" />
                <div class="listview-demo-desc">@context.Description</div>
            </BodyTemplate>
        </Card>
    </BodyTemplate>
    <FooterTemplate>
        <div class="text-end">
            Coptyright Bootstrap Blazor
        </div>
    </FooterTemplate>
</ListView>

<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    [NotNull]
    private IEnumerable<Product>? Products { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Products = Enumerable.Range(1, 100).Select(i => new Product()
        {
            ImageUrl = $"{WebsiteOption.CurrentValue.ImageLibUrl}/images/Pic{i}.jpg",
            Description = $"Pic{i}.jpg",
            Category = $"Group{(i % 4) + 1}"
        });
    }

    private Task OnListViewItemClick(Product item)
    {
        Trace?.Log($"ListViewItem: {item.Description} clicked");
        return Task.CompletedTask;
    }
}

@using static BootstrapBlazor.Shared.Samples.ListViews;
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.ListViews> Localizer

<ListView TItem="Product" Pageable="true" PageItems="21" OnQueryAsync="@OnQueryAsync">
    <HeaderTemplate>
        <div>@Localizer["ProductListText"]</div>
    </HeaderTemplate>
    <BodyTemplate>
        <Card>
            <BodyTemplate>
                <img src="@context.ImageUrl" />
                <div class="listview-demo-desc">@context.Description</div>
            </BodyTemplate>
        </Card>
    </BodyTemplate>
</ListView>

@code {
    [NotNull]
    private IEnumerable<Product>? Products { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Products = Enumerable.Range(1, 100).Select(i => new Product()
        {
            ImageUrl = $"{WebsiteOption.CurrentValue.ImageLibUrl}/images/Pic{i}.jpg",
            Description = $"Pic{i}.jpg",
            Category = $"Group{(i % 4) + 1}"
        });
    }

    private Task<QueryData<Product>> OnQueryAsync(QueryPageOptions options)
    {
        var items = Products.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems);
        return Task.FromResult(new QueryData<Product>()
        {
            Items = items,
            TotalCount = Products.Count()
        });
    }
}

@using static BootstrapBlazor.Shared.Samples.ListViews;
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.ListViews> Localizer

<ListView TItem="Product" GroupName="@(p => p.Category)" OnQueryAsync="@OnQueryAsync">
    <HeaderTemplate>
        <div>@Localizer["ProductListText"]</div>
    </HeaderTemplate>
    <BodyTemplate>
        <Card>
            <BodyTemplate>
                <img src="@context.ImageUrl" />
                <div class="listview-demo-desc">@context.Description</div>
            </BodyTemplate>
        </Card>
    </BodyTemplate>
</ListView>

@code {
    [NotNull]
    private IEnumerable<Product>? Products { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Products = Enumerable.Range(1, 100).Select(i => new Product()
        {
            ImageUrl = $"{WebsiteOption.CurrentValue.ImageLibUrl}/images/Pic{i}.jpg",
            Description = $"Pic{i}.jpg",
            Category = $"Group{(i % 4) + 1}"
        });
    }

    private Task<QueryData<Product>> OnQueryAsync(QueryPageOptions options)
    {
        var items = Products.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems);
        return Task.FromResult(new QueryData<Product>()
        {
            Items = items,
            TotalCount = Products.Count()
        });
    }
}

@using static BootstrapBlazor.Shared.Samples.ListViews;
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.ListViews> Localizer

<ListView TItem="Product" GroupName="@(p => p.Category)" OnQueryAsync="@OnQueryAsync" Collapsable="true" CollapsedGroupCallback="CollapsedGroupCallback">
    <HeaderTemplate>
        <div>@Localizer["ProductListText"]</div>
    </HeaderTemplate>
    <BodyTemplate>
        <Card>
            <BodyTemplate>
                <img src="@context.ImageUrl" />
                <div class="listview-demo-desc">@context.Description</div>
            </BodyTemplate>
        </Card>
    </BodyTemplate>
</ListView>

@code {
    [NotNull]
    private IEnumerable<Product>? Products { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Products = Enumerable.Range(1, 100).Select(i => new Product()
        {
            ImageUrl = $"{WebsiteOption.CurrentValue.ImageLibUrl}/images/Pic{i}.jpg",
            Description = $"Pic{i}.jpg",
            Category = $"Group{(i % 4) + 1}"
        });
    }

    private Task<QueryData<Product>> OnQueryAsync(QueryPageOptions options)
    {
        var items = Products.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems);
        return Task.FromResult(new QueryData<Product>()
        {
            Items = items,
            TotalCount = Products.Count()
        });
    }

    private static bool CollapsedGroupCallback(object? groupKey) => groupKey?.ToString() != "Group1";
}

@using static BootstrapBlazor.Shared.Samples.ListViews;
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.ListViews> Localizer

<ListView TItem="Product" GroupName="@(p => p.Category)" OnQueryAsync="@OnQueryAsync" Collapsable="true" IsAccordion="true">
    <HeaderTemplate>
        <div>@Localizer["ProductListText"]</div>
    </HeaderTemplate>
    <BodyTemplate>
        <Card>
            <BodyTemplate>
                <img src="@context.ImageUrl" />
                <div class="listview-demo-desc">@context.Description</div>
            </BodyTemplate>
        </Card>
    </BodyTemplate>
</ListView>

@code {
    [NotNull]
    private IEnumerable<Product>? Products { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Products = Enumerable.Range(1, 100).Select(i => new Product()
        {
            ImageUrl = $"{WebsiteOption.CurrentValue.ImageLibUrl}/images/Pic{i}.jpg",
            Description = $"Pic{i}.jpg",
            Category = $"Group{(i % 4) + 1}"
        });
    }

    private Task<QueryData<Product>> OnQueryAsync(QueryPageOptions options)
    {
        var items = Products.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems);
        return Task.FromResult(new QueryData<Product>()
        {
            Items = items,
            TotalCount = Products.Count()
        });
    }

    private static bool CollapsedGroupCallback(object? groupKey) => groupKey?.ToString() != "Group1";
}