@using Microsoft.AspNetCore.Mvc.Localization
@using gehGassi.Web.Helper
@using gehGassi.Permissions
@inject IViewLocalizer Localizer
@model gehGassi.Web.Models.ProductVm

<section id="productCountriesContainer">
    <div class="pageTopButtonContainer">
        <button id="btnBack" type="button" class="btn btn-primary btn-sm"><i class="fa fa-arrow-left"></i> @Localizer["Button_Back"]</button>
    </div>
    <div id="pageTitleAdd" style="display: none;">@Localizer["Button_CountrySettings"] @Model.Sku</div>

    <div id="listCountries">
        <div id="listContainer">
            <div id="gridToolbar" class="gridToolbar">
                <div style="line-height: 40px; padding-left: 10px;">
                    <button id="btnAdd" title="@Localizer["Button_Create"]" type="button" class="btn btn-primary btn-sm" cb-permissions="@Tools.PermissionList(Permission.SettingsManage, Permission.SettingsProducts)"><i class="fa fa-circle-plus"></i></button>
                    <button id="btnEdit" title="@Localizer["Button_Edit"]" type="button" class="btn btn-primary btn-sm" disabled="disabled" cb-permissions="@Tools.PermissionList(Permission.SettingsManage, Permission.SettingsProducts)"><i class="fa fa-pencil"></i></button>
                    <button id="btnDelete" title="@Localizer["Button_Delete"]" type="button" class="btn btn-primary btn-sm" disabled="disabled" cb-permissions="@Tools.PermissionList(Permission.SettingsManage, Permission.SettingsProducts)"><i class="fa fa-trash"></i></button>
                    <div class="columnChooser">
                        <button id="btnColumns" title="" type="button" class="btn btn-primary btn-sm"><i class="fa fa-columns"></i></button>
                    </div>
                    <div class="searchBar">
                        <input id="search" type="text" class="form-control" placeholder="@Localizer["Common_Placeholder_Search"]"/>
                    </div>
                </div>
            </div>
            <div id="gridProductCountries"></div>
        </div>
    </div>
    <div id="detailCountries" style="display: none;">

    </div>
    
    <script id="flagTemplate" type="text/x-template">
        <div><img src="/images/countries/${countryIso}.png" alt="${countryIso}" style="vertical-align: bottom;" /> ${countryIso}</div>
    </script>

    @Html.Hidden("jsGetUrl", Url.Action("GetCountries", "Product", new{productId = Model.Id}))
    @Html.Hidden("jsCreateUrl", Url.Action("CreateCountry", "Product", new{productId = Model.Id}))
    @Html.Hidden("jsEditUrl", Url.Action("EditCountry", "Product"))
    @Html.Hidden("jsDeleteUrl", Url.Action("DeleteCountry", "Product"))

    <system-js url="~/scripts/Views/Product/countries.js" fresh-import="true" load-on-post="true"></system-js>

</section>