@model ProductModel

<div class="card-body">
    @if (Model.Id > 0)
    {
        @await Html.PartialAsync("Table", new DataTablesModel
        {
            Name = "productpictures-grid",
            UrlRead = new DataUrl("ProductPictureList", "Product", new RouteValueDictionary { [nameof(Model.ProductPictureSearchModel.ProductId)] = Model.ProductPictureSearchModel.ProductId }),
            UrlDelete = new DataUrl("ProductPictureDelete", "Product", null),
            UrlUpdate = new DataUrl("ProductPictureUpdate", "Product", null),
            Length = Model.ProductPictureSearchModel.PageSize,
            LengthMenu = Model.ProductPictureSearchModel.AvailablePageSizes,
            ColumnCollection = new List<ColumnProperty>
                {
                    new ColumnProperty(nameof(ProductPictureModel.PictureUrl))
                    {
                        Title = T("Admin.Catalog.Products.Pictures.Fields.Picture").Text,
                        Render = new RenderCustom("renderPicturesColumnProductPictureUrl")
                    },
                    new ColumnProperty(nameof(ProductPictureModel.DisplayOrder))
                    {
                        Title = T("Admin.Catalog.Products.Pictures.Fields.DisplayOrder").Text,
                        Width = "150",
                        ClassName = NopColumnClassDefaults.CenterAll,
                        Editable = true,
                        EditType = EditType.Number
                    },
                    new ColumnProperty(nameof(ProductPictureModel.OverrideAltAttribute))
                    {
                        Title = T("Admin.Catalog.Products.Pictures.Fields.OverrideAltAttribute").Text,
                        Width = "200",
                        Editable = true,
                        EditType = EditType.String
                    },
                    new ColumnProperty(nameof(ProductPictureModel.OverrideTitleAttribute))
                    {
                        Title = T("Admin.Catalog.Products.Pictures.Fields.OverrideTitleAttribute").Text,
                        Width = "200",
                        Editable = true,
                        EditType = EditType.String
                    },
                    new ColumnProperty(nameof(ProductPictureModel.Id))
                    {
                        Title = T("Admin.Common.Edit").Text,
                        Width = "200",
                        ClassName =  NopColumnClassDefaults.Button,
                        Render = new RenderButtonsInlineEdit()
                    },
                    new ColumnProperty(nameof(ProductPictureModel.Id))
                    {
                        Title = T("Admin.Common.Delete").Text,
                        Width = "100",
                        Render = new RenderButtonRemove(T("Admin.Common.Delete").Text),
                        ClassName = NopColumnClassDefaults.Button
                    }
                }
        })
        
        <script>
            function renderPicturesColumnProductPictureUrl(data, type, row, meta) {
                return '<a href="' + row.PictureUrl + '" target="_blank"><img alt="' + row.PictureId + '" src="' + row.PictureUrl + '" width="150" /></a>';
            }
        </script>

        <div class="card card-default">
            <div class="card-header">
                @T("Admin.Catalog.Products.Pictures.AddNew")
            </div>
            <div class="card-body">
                <script>
                    $(document).ready(function() {
                        $('#addProductPicture').click(function() {
                            var pictureId = $("#@Html.IdFor(model => model.AddPictureModel.PictureId)").val();
                            var overrideAltAttribute = $("#@Html.IdFor(model => model.AddPictureModel.OverrideAltAttribute)").val();
                            var overrideTitleAttribute = $("#@Html.IdFor(model => model.AddPictureModel.OverrideTitleAttribute)").val();
                            var displayOrder = $("#@Html.IdFor(model => model.AddPictureModel.DisplayOrder)").val();

                            if (pictureId == 0) {
                                $("#addProductPictureAlert").click();
                                return;
                            }

                            $('#addProductPicture').attr('disabled', true);

                            var postData = {
                                pictureId: pictureId,
                                displayOrder: displayOrder,
                                overrideAltAttribute: overrideAltAttribute,
                                overrideTitleAttribute: overrideTitleAttribute,
                                productId: '@Model.Id'
                            };
                            addAntiForgeryToken(postData);

                            $.ajax({
                                cache: false,
                                type: "POST",
                                url: "@(Url.Action("ProductPictureAdd", "Product"))",
                                data: postData,
                                success: function (data, textStatus, jqXHR) {
                                    if (!data.Result) {
                                        return;
                                    }                                        
                                    updateTable('#productpictures-grid');
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    $("#productPictureAddAlert").click();
                                },
                                complete: function (jqXHR, textStatus) {
                                    $('#addProductPicture').attr('disabled', false);
                                }
                            });
                        });
                    });
                </script>
                <div class="form-group row">
                    <div class="col-md-3">
                        <nop-label asp-for="AddPictureModel.PictureId" />
                    </div>
                    <div class="col-md-9">
                        <nop-editor asp-for="AddPictureModel.PictureId" />
                        <span asp-validation-for="AddPictureModel.PictureId"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-3">
                        <nop-label asp-for="AddPictureModel.OverrideAltAttribute" />
                    </div>
                    <div class="col-md-9">
                        <nop-editor asp-for="AddPictureModel.OverrideAltAttribute" />
                        <span asp-validation-for="AddPictureModel.OverrideAltAttribute"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-3">
                        <nop-label asp-for="AddPictureModel.OverrideTitleAttribute" />
                    </div>
                    <div class="col-md-9">
                        <nop-editor asp-for="AddPictureModel.OverrideTitleAttribute" />
                        <span asp-validation-for="AddPictureModel.OverrideTitleAttribute"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-3">
                        <nop-label asp-for="AddPictureModel.DisplayOrder" />
                    </div>
                    <div class="col-md-9">
                        <nop-editor asp-for="AddPictureModel.DisplayOrder" />
                        <span asp-validation-for="AddPictureModel.DisplayOrder"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-9 offset-md-3">
                        <button type="button" id="addProductPicture" class="btn btn-primary">@T("Admin.Catalog.Products.Pictures.AddButton")</button>
                    </div>
                </div>
            </div>
        </div>
    }
    else
    {
        <div class="card card-default">
            <div class="card-body" id="product-pictures-area">
                @T("Admin.Catalog.Products.Pictures.SaveBeforeEdit")
            </div>
        </div>
    }
</div>
<nop-alert asp-alert-id="addProductPictureAlert" asp-alert-message="@T("Admin.Catalog.Products.Pictures.Alert.AddNew")" />
<nop-alert asp-alert-id="productPictureAddAlert" asp-alert-message="@T("Admin.Catalog.Products.Pictures.Alert.PictureAdd")" />