@model TopicModel

<div class="card-body">
    <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="IncludeInTopMenu" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="IncludeInTopMenu" />
            <span asp-validation-for="IncludeInTopMenu"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="IncludeInFooterColumn1" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="IncludeInFooterColumn1" />
            <span asp-validation-for="IncludeInFooterColumn1"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="IncludeInFooterColumn2" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="IncludeInFooterColumn2" />
            <span asp-validation-for="IncludeInFooterColumn2"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="IncludeInFooterColumn3" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="IncludeInFooterColumn3" />
            <span asp-validation-for="IncludeInFooterColumn3"></span>
        </div>
    </div>
    <div class="form-group row advanced-setting">
        <div class="col-md-3">
            <nop-label asp-for="IncludeInSitemap" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="IncludeInSitemap" />
            <span asp-validation-for="IncludeInSitemap"></span>
        </div>
    </div>
    <div class="form-group row advanced-setting">
        <div class="col-md-3">
            <nop-label asp-for="IsPasswordProtected" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="IsPasswordProtected" />
            <span asp-validation-for="IsPasswordProtected"></span>
        </div>
    </div>
    <nop-nested-setting asp-for="IsPasswordProtected">
        <div class="form-group row advanced-setting">
            <div class="col-md-3">
                <nop-label asp-for="Password" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="Password" html-attributes="@(new { autocomplete = "off" })"/>
                <span asp-validation-for="Password"></span>
            </div>
        </div>
    </nop-nested-setting>
    <div class="form-group row advanced-setting">
        <div class="col-md-3">
            <nop-label asp-for="SelectedCustomerRoleIds" />
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-4">
                    <nop-select asp-for="SelectedCustomerRoleIds" asp-items="Model.AvailableCustomerRoles" asp-multiple="true" />
                    <script>
                        $(function() {
                            var rolesIdsInput = $('#@Html.IdFor(model => model.SelectedCustomerRoleIds)').select2({
                                closeOnSelect: false,
                                @if (!Model.AvailableCustomerRoles.Any())
                                {
                                <text>
                                disabled: true,
                                placeholder: 'No customer roles available',
                                </text>
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-md-8">
                    @await Component.InvokeAsync(typeof(AclDisabledWarningViewComponent))
                </div>
            </div>
        </div>
    </div>
    <div class="form-group row advanced-setting">
        <div class="col-md-3">
            <nop-label asp-for="SelectedStoreIds" />
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-4">
                    <nop-select asp-for="SelectedStoreIds" asp-items="Model.AvailableStores" asp-multiple="true" />
                    <script>
                        $(function() {
                            var storesIdsInput = $('#@Html.IdFor(model => model.SelectedStoreIds)').select2({
                                closeOnSelect: false,
                                @if (!Model.AvailableStores.Any())
                                {
                                <text>
                                disabled: true,
                                placeholder: 'No stores available',
                                </text>
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-md-8">
                    @await Component.InvokeAsync(typeof(MultistoreDisabledWarningViewComponent))
                </div>
            </div>
        </div>
    </div>
    <div class="form-group row advanced-setting">
        <div class="col-md-3">
            <nop-label asp-for="AccessibleWhenStoreClosed" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="AccessibleWhenStoreClosed" />
            <span asp-validation-for="AccessibleWhenStoreClosed"></span>
        </div>
    </div>
    <div class="form-group row advanced-setting" @(Model.AvailableTopicTemplates.SelectionIsNotPossible() ? Html.Raw("style=\"display:none\"") : null)>
        <div class="col-md-3">
            <nop-label asp-for="TopicTemplateId" />
        </div>
        <div class="col-md-9">
            <nop-select asp-for="TopicTemplateId" asp-items="Model.AvailableTopicTemplates" />
            <span asp-validation-for="TopicTemplateId"></span>
        </div>
    </div>
    <div class="form-group row advanced-setting">
        <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 class="form-group row advanced-setting">
        <div class="col-md-3">
            <nop-label asp-for="SystemName" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="SystemName" />
            <span asp-validation-for="SystemName"></span>
        </div>
    </div>
</div>