.NET\05_MVC_Products\MVC\Views\Products\List.cshtml

                
                    @model ProductsIndexViewModel

@{
    ViewData["Title"] = "Product Search";
}

<div class="container-fluid">
    <h1>@ViewData["Title"]</h1>
    <hr />
</div>

@if (Model.List is not null)
{
    <form asp-action="List" autocomplete="off">
        @Html.AntiForgeryToken()
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text-danger">
                    @TempData["Message"]
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-10 text-success">
                    @Model.List.Count() record(s) found.
                </div>
                <div class="col-2 text-end">
                    
                </div>
            </div>
            <hr />
            <div class="row mb-3">
                <div class="col-1">
                    <label asp-for="Filter.Name"></label>
                </div>
                <div class="col-3">
                    <input asp-for="Filter.Name" class="form-control" placeholder="All product names" />
                </div>
                <div class="col-1">
                    <label asp-for="Filter.CategoryId"></label>
                </div>
                <div class="col-3">
                    <select asp-for="Filter.CategoryId" class="form-select select2" asp-items="Model.CategorySelectList">
                        <option value="">-- All Categories --</option>
                    </select>
                </div>
                <div class="col-1">
                    <label asp-for="Filter.StoreIds"></label>
                </div>
                <div class="col-3">
                    <select multiple asp-for="Filter.StoreIds" class="form-select select2" asp-items="Model.StoreMultiSelectList"></select>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-1">
                    <label asp-for="Filter.StockAmountStart"></label>
                </div>
                <div class="col-3">
                    <div class="input-group">
                        <input asp-for="Filter.StockAmountStart" class="form-control" />
                        <span class="input-group-text">-</span>
                        <input asp-for="Filter.StockAmountEnd" class="form-control" />
                    </div>
                </div>
                <div class="col-1">
                    <label asp-for="Filter.UnitPriceStart"></label>
                </div>
                <div class="col-3">
                    <div class="input-group">
                        <input asp-for="Filter.UnitPriceStart" class="form-control" />
                        <span class="input-group-text">-</span>
                        <input asp-for="Filter.UnitPriceEnd" class="form-control" />
                    </div>
                </div>
                <div class="col-1">
                    <label asp-for="Filter.ExpirationDateStart"></label>
                </div>
                <div class="col-3">
                    <div class="input-group">
                        <input asp-for="Filter.ExpirationDateStart" class="form-control datetimepicker" type="text" />
                        <span class="input-group-text">-</span>
                        <input asp-for="Filter.ExpirationDateEnd" class="form-control datetimepicker" type="text" />
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="offset-1 col-11">
                    <button type="submit" class="btn btn-success">Search</button>
                    &nbsp;                    
                    <a asp-action="List" class="btn btn-warning">Clear</a>
                </div>
            </div>
            @if (Model.List.Any())
            {
                <div style="height:430px;overflow-y:auto;">
                    <table class="table table-striped table-hover">
                        <thead class="table-secondary">
                            <tr>
                                <th>
                                    @* Since the model.List property's type is List, we get the first element to display the property's display name *@
                                    @Html.DisplayNameFor(model => model.List.First().Name)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.List.First().UnitPriceF)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.List.First().StockAmountF)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.List.First().ExpirationDateF)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.List.First().Category)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.List.First().Stores)
                                </th>
                            </tr>
                        </thead>
                        <tbody>
		                    @foreach (var item in Model.List) {
				                <tr>
					                <td>
						                @Html.DisplayFor(modelItem => item.Name)
					                </td>
					                <td>
						                @Html.DisplayFor(modelItem => item.UnitPriceF)
					                </td>
					                <td>
						                @Html.DisplayFor(modelItem => item.StockAmountF)
					                </td>
					                <td>
						                @Html.DisplayFor(modelItem => item.ExpirationDateF)
					                </td>
					                <td>
						                @Html.DisplayFor(modelItem => item.Category)
					                </td>
                                    <td>
                                        @string.Join(", ", item.Stores)
                                    </td>
					            </tr>
		                    }
                        </tbody>
                    </table>
                </div>
            }
        </div>
    </form>
}

@section Scripts {
    @* https://xdsoft.net/jqplugins/datetimepicker *@
    <link href="~/lib/jquery-datetimepicker/jquery.datetimepicker.min.css" rel="stylesheet" />
    <script src="~/lib/jquery-datetimepicker/jquery.datetimepicker.full.min.js"></script>

    @* https://select2.org/ *@
    <link href="~/lib/select2/css/select2.min.css" rel="stylesheet" />
    <script src="~/lib/select2/js/select2.min.js"></script>

    <script>
        $(function () {
            $(".datetimepicker").datetimepicker({
                // for using only date
                timepicker: false,
                format: 'm/d/Y'
                // for using date with time
                // timepicker: true,
                // format: 'm/d/Y H:i'
            });

            $(".select2").select2();
        });
    </script>
}