@model LanguageModel

<div class="card-body">
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="Name" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="Name" asp-required="true" />
            <span asp-validation-for="Name"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="LanguageCulture" />
        </div>
        <div class="col-md-9">
            @{
                var cultures = System.Globalization.CultureInfo.GetCultures(System.Globalization.CultureTypes.SpecificCultures)
                    .OrderBy(x => x.EnglishName)
                    .Select(x => new SelectListItem
                    {
                        Value = x.IetfLanguageTag,
                        Text = $"{x.EnglishName}. {x.IetfLanguageTag}"
                    });
            }
            <nop-select asp-for="LanguageCulture" asp-items="@cultures" />
            <span asp-validation-for="LanguageCulture"></span>
            <script>
                $(document).ready(function() {
                    $('#@Html.IdFor(model => model.LanguageCulture)').on('input change', function () {
                        warningValidation('@Url.Action("LanguageCultureWarning")', '@Html.NameFor(model => model.LanguageCulture)', { currentCulture: '@(Model.LanguageCulture)', changedCulture: $(this).val() });
                    });
                });
            </script>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="UniqueSeoCode" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="UniqueSeoCode" asp-required="true" />
            <span asp-validation-for="UniqueSeoCode"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="FlagImageFileName" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="FlagImageFileName" asp-render-form-control-class="false" />
            <span asp-validation-for="FlagImageFileName"></span>
            <script>
                $(function() {
                    $('#FlagImageFileName').kendoDropDownList({
                        dataTextField: "Text",
                        dataValueField: "Value",
                        valueTemplate:
                            '<span class="image" style="background-image: url(\'@Url.Content("~/images/flags/#:data.Text#")\'); width: 16px; height: 11px;"></span><span>#:data.Value#</span>',
                        template:
                            '<span class="image" style="background-image: url(\'@Url.Content("~/images/flags/#:data.Text#")\'); width: 16px; height: 11px;"></span><span>#:data.Value#</span>',
                        dataSource: {
                            transport: {
                                type: "json",
                                read: {
                                    url: "@Html.Raw(Url.Action("GetAvailableFlagFileNames", "Language"))",
                                    type: "POST",
                                    dataType: "json",
                                    data: addAntiForgeryToken
                                }
                            }
                        }
                    }).data("kendoDropDownList");
                });
            </script>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="Rtl" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="Rtl"/>
            <span asp-validation-for="Rtl"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="DefaultCurrencyId" />
        </div>
        <div class="col-md-9">
            <nop-select asp-for="DefaultCurrencyId" asp-items="Model.AvailableCurrencies" />
            <span asp-validation-for="DefaultCurrencyId"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="SelectedStoreIds" />
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3">
                    <nop-select asp-for="SelectedStoreIds" asp-items="Model.AvailableStores" asp-multiple="true" />
                    <script>
                        $(document).ready(function() {
                            var storesIdsInput = $('#@Html.IdFor(model => model.SelectedStoreIds)').data("kendoMultiSelect");
                            storesIdsInput.setOptions({
                                autoClose: false,
                                filter: "contains"
                            });

                            @if (Model.AvailableStores.Count == 0)
                            {
                                <text>
                        storesIdsInput.setOptions({
                            enable: false,
                            placeholder: 'No stores available'
                        });
                        storesIdsInput._placeholder();
                        storesIdsInput._enable();
                        </text>
                            }
                        });
                    </script>
                </div>
                <div class="col-md-9">
                    @await Component.InvokeAsync("MultistoreDisabledWarning")
                </div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="Published" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="Published" />
            <span asp-validation-for="Published"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="DisplayOrder" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="DisplayOrder" />
            <span asp-validation-for="DisplayOrder"></span>
        </div>
    </div>
</div>
