@model ProductModel
<div class="card-body">
    <p>
        @T("Admin.Catalog.Products.RelatedProducts.Hint")
    </p>
    @if (Model.Id > 0)
    {
        <div class="card card-default">
            <div class="card-body">

                @await Html.PartialAsync("Table", new DataTablesModel
                {
                    Name = "relatedproducts-grid",
                    UrlRead = new DataUrl("RelatedProductList", "Product", new RouteValueDictionary { [nameof(Model.RelatedProductSearchModel.ProductId)] = Model.RelatedProductSearchModel.ProductId }),
                    UrlDelete = new DataUrl("RelatedProductDelete", "Product", null),
                    UrlUpdate = new DataUrl("RelatedProductUpdate", "Product", null),
                    Length = Model.RelatedProductSearchModel.PageSize,
                    LengthMenu = Model.RelatedProductSearchModel.AvailablePageSizes,
                    ColumnCollection = new List<ColumnProperty>
                        {
                            new ColumnProperty(nameof(RelatedProductModel.Product2Name))
                            {
                                Title = T("Admin.Catalog.Products.RelatedProducts.Fields.Product").Text
                            },
                            new ColumnProperty(nameof(RelatedProductModel.DisplayOrder))
                            {
                                Title = T("Admin.Catalog.Products.RelatedProducts.Fields.DisplayOrder").Text,
                                Width = "150",
                                ClassName = NopColumnClassDefaults.CenterAll,
                                Editable = true,
                                EditType = EditType.Number
                            },
                            new ColumnProperty(nameof(RelatedProductModel.ProductId2))
                            {
                                Title = T("Admin.Common.View").Text,
                                Width = "150",
                                ClassName = NopColumnClassDefaults.Button,
                                Render = new RenderButtonView(new DataUrl("~/Admin/Product/Edit/", nameof(RelatedProductModel.Product2Name)))
                            },
                            new ColumnProperty(nameof(RelatedProductModel.Id))
                            {
                                Title = T("Admin.Common.Edit").Text,
                                Width = "200",
                                ClassName =  NopColumnClassDefaults.Button,
                                Render = new RenderButtonsInlineEdit()
                            },
                            new ColumnProperty(nameof(RelatedProductModel.Id))
                            {
                                Title = T("Admin.Common.Delete").Text,
                                Width = "100",
                                Render = new RenderButtonRemove(T("Admin.Common.Delete").Text),
                                ClassName = NopColumnClassDefaults.Button
                            }
                        }
                })
            </div>
            <div class="card-footer">
                <button type="submit" id="btnAddNewRelatedProduct" class="btn btn-primary" onclick="javascript:OpenWindow('@(Url.Action("RelatedProductAddPopup", "Product", new {productId = Model.Id, btnId = "btnRefreshRelatedProducts", formId = "product-form"}))', 800, 800, true); return false;">
                    @T("Admin.Catalog.Products.RelatedProducts.AddNew")
                </button>
                <button type="submit" id="btnRefreshRelatedProducts" style="display: none"></button>
                <script>
                    $(function() {
                        $('#btnRefreshRelatedProducts').click(function () {
                            //refresh grid
                            updateTable('#relatedproducts-grid');

                            //return false to don't reload a page
                            return false;
                        });
                    });
                </script>
            </div>
        </div>
    }
    else
    {
        <div class="card card-default">
            <div class="card-body">
                @T("Admin.Catalog.Products.RelatedProducts.SaveBeforeEdit")
            </div>
        </div>
    }
</div>