@model IList<CategoryModel>

@inject IViewComponentSelector viewComponentSelector

@if (Model.Count > 0)
{
    <div class="category-grid home-page-category-grid">
        <div class="item-grid">
            @foreach (var item in Model)
            {
                <div class="item-box">
                    <div class="category-item">
                        <div class="picture">
                            <a href="@Url.RouteUrl("Category", new { SeName = item.SeName })" title="@item.PictureModel.Title">
                                @if (viewComponentSelector.SelectComponent("LazyLoadImage") != null)
                                {
                                    @await Component.InvokeAsync("LazyLoadImage", new(string Key, string Value)[] 
                                    {
                                        ("src", item.PictureModel.ImageUrl),
                                        ("alt", item.PictureModel.AlternateText),
                                        ("title", item.PictureModel.Title)
                                    })
                                }
                                else
                                {
                                    <img alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" title="@item.PictureModel.Title" />
                                }
                            </a>
                        </div>
                        <h2 class="title">
                            <a href="@Url.RouteUrl("Category", new { SeName = item.SeName })" title="@item.PictureModel.Title">
                                @item.Name
                            </a>
                        </h2>
                    </div>
                </div>
            }
        </div>
    </div>
}