@model AppSettingsModel

<div class="card-body">
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="WebOptimizerConfigModel.EnableJavaScriptBundling" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="WebOptimizerConfigModel.EnableJavaScriptBundling" />
            <span asp-validation-for="WebOptimizerConfigModel.EnableJavaScriptBundling"></span>
        </div>
    </div>
    <nop-nested-setting asp-for="WebOptimizerConfigModel.EnableJavaScriptBundling" disable-auto-generation="true">
        <div class="form-group row advanced-setting" id="java-script-bundle-suffix">
            <div class="col-md-3">
                <nop-label asp-for="WebOptimizerConfigModel.JavaScriptBundleSuffix" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="WebOptimizerConfigModel.JavaScriptBundleSuffix" />
                <span asp-validation-for="WebOptimizerConfigModel.JavaScriptBundleSuffix"></span>
            </div>
        </div>
    </nop-nested-setting>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="WebOptimizerConfigModel.EnableCssBundling" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="WebOptimizerConfigModel.EnableCssBundling" />
            <span asp-validation-for="WebOptimizerConfigModel.EnableCssBundling"></span>
        </div>
    </div>
    <nop-nested-setting asp-for="WebOptimizerConfigModel.EnableCssBundling" disable-auto-generation="true">
        <div class="form-group row advanced-setting" id="css-bundle-suffix">
            <div class="col-md-3">
                <nop-label asp-for="WebOptimizerConfigModel.CssBundleSuffix" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="WebOptimizerConfigModel.CssBundleSuffix" />
                <span asp-validation-for="WebOptimizerConfigModel.CssBundleSuffix"></span>
            </div>
        </div>
    </nop-nested-setting>
    <div class="form-group row">
        <div class="col-md-3">
            <nop-label asp-for="WebOptimizerConfigModel.EnableDiskCache" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="WebOptimizerConfigModel.EnableDiskCache" />
            <span asp-validation-for="WebOptimizerConfigModel.EnableDiskCache"></span>
        </div>
    </div>
    <nop-nested-setting asp-for="WebOptimizerConfigModel.EnableDiskCache" disable-auto-generation="true">
        <div class="form-group row advanced-setting" id="disk-cache-directory">
            <div class="col-md-3">
                <nop-label asp-for="WebOptimizerConfigModel.CacheDirectory" />
            </div>
            <div class="col-md-9">
                <nop-editor asp-for="WebOptimizerConfigModel.CacheDirectory" />
                <span asp-validation-for="WebOptimizerConfigModel.CacheDirectory"></span>
            </div>
        </div>
    </nop-nested-setting>
</div>

<script>
    $(document).ready(function () {
        $("#@Html.IdFor(model => model.WebOptimizerConfigModel.EnableJavaScriptBundling)").click(toggleJavaScriptBundling);
        $("#@Html.IdFor(model => model.WebOptimizerConfigModel.EnableCssBundling)").click(toggleCssBundling);
        $("#@Html.IdFor(model => model.WebOptimizerConfigModel.EnableDiskCache)").click(toggleDiskCache);

        toggleJavaScriptBundling();
        toggleCssBundling();
        toggleDiskCache();
        
        function toggleJavaScriptBundling()
        {
            if ($('#@Html.IdFor(model => model.WebOptimizerConfigModel.EnableJavaScriptBundling)').is(':checked')) {
                $('#java-script-bundle-suffix').showElement();
            }
            else
            {
                $('#java-script-bundle-suffix').hideElement();
            }
        }

        function toggleCssBundling()
        {
            if ($('#@Html.IdFor(model => model.WebOptimizerConfigModel.EnableCssBundling)').is(':checked')) {
                $('#css-bundle-suffix').showElement();
            }
            else
            {
                $('#css-bundle-suffix').hideElement();
            }
        }

        function toggleDiskCache()
        {
            if ($('#@Html.IdFor(model => model.WebOptimizerConfigModel.EnableDiskCache)').is(':checked')) {
                $('#disk-cache-directory').showElement();
            }
            else
            {
                $('#disk-cache-directory').hideElement();
            }
        }

    });
</script>