<div ng-controller="ModernDeployController as vm">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Modern Experiences' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions" ng-hide="vm.isSaaS">
            <button class="btn btn-primary wide-config-btn"
                    ng-disabled="vm.saving" ng-click="vm.saveConfig()">
                {{(vm.saving ? 'Saving' : 'Save configuration')  | translate}}
            </button>
        </div>
    </div>

    <div class="panel lt-module-page__content-panel">
        <h4>
            {{"Options for including Wizdom features for Sites based on Modern Experiences for SharePoint" | translate}}
        </h4>

        <div ng-hide="vm.isSaaS">
            <p>
                {{"Selecting this option means that Wizdom features for Sites based on Modern Experiences for SharePoint will be included in Wizdom upgrades going forward." | translate}}
            </p>
            
            <br />

            <div class="form-group row">
                <div class="col-sm-4">
                    <label class="control-label fw-bold">{{'Enable' | translate}}</label>
                </div>
                <div class="col-sm-8">
                    <input type="checkbox" ng-model="vm.optInToModernDeploy">
                </div>
            </div>

            <br />

            <p class="alert alert-info">
                {{"Note: Disabling this option again will not remove added Wizdom features, but new updates to these will no longer be added as part of future Wizdom upgrades" | translate}}
            </p>
        </div>

        <p class="alert alert-info">
            {{"Note: Modern packages can be associated with only one Wizdom instance in Office 365 tenant"}}
        </p>
    </div>

    <div class="lt-module-page__panel-footer">
        <button class="btn btn-warning wide-config-btn"
                ng-disabled="(!vm.optInToModernDeploy && !vm.isSaaS) || vm.saving"
                ng-click="vm.deployModern()">
            {{'Deploy modern packages immediately' | translate}}
        </button>
        <button class="btn btn-warning wide-config-btn"
                ng-disabled="(!vm.optInToModernDeploy && !vm.isSaaS) || vm.saving"
                ng-click="vm.associateModernToWizdom()">
            {{'Associate modern packages with this Wizdom instance' | translate}}
        </button>
    </div>
</div>