<div class="provioning-content-accelerator" ng-controller="Wizdom365ContentProvisioningController">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Accelerate' | translate}}</h1>
        </div>
    </div>

    <form name="formProvisioning" class="form-horizontal">
        <div class="panel lt-module-page__content-panel">
            <h4>
                {{'Wizdom Accelerate Content Provisioning' | translate}}
            </h4>
            <p current-sitecollection format-string="Selected SharePoint content and structure will be provisioned to the {0} site collection"></p>
            <div translations-warning></div>
            <div page-status></div>
            <div ng-show="provisioning == true" class="show-hide-slide">
                <div class="ms-dlgLoadingTextDiv ms-alignCenter">
                    <br />
                    <div>{{progressMessage}}</div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width:progress + '%'}">
                            <span style="color: black">{{progress}}%</span>
                        </div>
                    </div>
                    <div>{{subprogressMessage}}</div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width:subprogress + '%'}">
                            <span style="color: black">{{subprogress}}%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="provisioning-summary" ng-if="provisioningSummary.length>0">
                <ul>
                    <li class="alert-{{summary.type=='error'?'danger':summary.type}}" role="alert" ng-repeat="summary in provisioningSummary">
                        <i class="glyphicon" ng-class="{'glyphicon-ok-sign': (summary.type=='success'), 'glyphicon-exclamation-sign': (summary.type=='error'),'glyphicon-warning-sign':(summary.type=='warning')}"></i>
                        {{summary.taskName}} <a ng-if="summary.url" href="{{tenantUrl}}{{summary.url}}" target="_blank">{{summary.title}}</a> {{summary.type=='success'?"done":(summary.type=='error'?"failed.":"")}} {{ summary.errorMessage? "Error: "+summary.errorMessage:""}}
                    </li>
                </ul>
            </div>
            <div class='alert alert-info' ng-if='siteTemplates.length==0'>
                {{'Site templates are loading. Please wait...' | translate}}
            </div>
        </div>

        <div ng-hide="provisioning == true || siteTemplates.length==0" class="provisioning-elements">
            <div class="panel lt-module-page__content-panel">
                <div class="panel-heading">
                    {{'Global Configuration' | translate}}
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="fw-bold" for="provision-globalConfig">{{'Enable' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision-globalConfig" type="checkbox" ng-model="provisioningObj.globalConfiguration.provision" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label for="provision-noticeboard-ct">{{'Update Noticeboard Content Type' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision-noticeboard-ct" type="checkbox" ng-disabled="!provisioningObj.globalConfiguration.provision" ng-model="provisioningObj.globalConfiguration.updateNoticeboardContentType" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-4">
                        <label for="provision-servicemenu">{{'Apply Service Menu settings' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision-servicemenu" type="checkbox" ng-disabled="!provisioningObj.globalConfiguration.provision" ng-model="provisioningObj.globalConfiguration.applyServiceMenuSettings" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-4">
                        <label for="provision-megamenu">{{'Apply Mega Menu settings' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision-megamenu" type="checkbox" ng-disabled="!provisioningObj.globalConfiguration.provision" ng-model="provisioningObj.globalConfiguration.applyMegaMenuSettings" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-4">
                        <label for="provision-theme">{{'Apply Theme' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision-theme" type="checkbox" ng-disabled="!provisioningObj.globalConfiguration.provision" ng-model="provisioningObj.globalConfiguration.applyTheme" />
                    </div>
                </div>
            </div>

            <div class="panel lt-module-page__content-panel">
                <div class="panel-heading">
                    {{provisioningObj.frontpage.title}}
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label for="provision-frontpage" class="fw-bold">{{'Enable' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision-frontpage" type="checkbox" ng-model="provisioningObj.frontpage.provision" />
                    </div>
                </div>

                <div class="form-group row" ng-show="false">
                    <div class="col-sm-4">
                        <label>{{'Title' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input type="checkbox" ng-disabled="!provisioningObj.frontpage.provision" ng-model="provisioningObj.frontpage.title" placeholder="{{'Title' | translate}}" />
                    </div>
                </div>

                <div class="form-group row" ng-show="false">
                    <div class="col-sm-4">
                        <label>{{'URL' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input type="checkbox" ng-disabled="!provisioningObj.frontpage.provision" ng-model="provisioningObj.frontpage.title" placeholder="{{'URL' | translate}}" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Frontpage Site Template' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <select class="form-control" ng-disabled="!provisioningObj.frontpage.provision" ng-model="provisioningObj.frontpage.siteTemplate" ng-required="provisioningObj.frontpage.provision">
                            <option value="">{{'Site Template' | translate}}</option>
                            <option ng-repeat="template in siteTemplates" value="{{template.name}}" ng-selected="template.name==provisioningObj.frontpage.siteTemplate">{{template.displayName}}</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12" ng-if="provisioningObj.frontpage.siteTemplate==='Frontpage' && (provisioningObj.corporatenews.provision==false || provisioningObj.noticeboard.provision==false)">
                        <div class="alert alert-info">
                            {{'The Frontpage site template will remove all webparts from homepage, and add webparts linked to Corporate News and Noticeboard - if these modules are not currently selected for provisioning, and have previously been provisioned with different urls than default, please select these modules for provisioning and enter the previously provisioned urls, in order for these webparts to work properly!' | translate}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel lt-module-page__content-panel">
                <div class="panel-heading">
                    {{provisioningObj.noticeboard.title}}
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label for="provision-noticeboard" class="fw-bold">{{'Enable' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision-noticeboard" type="checkbox" ng-model="provisioningObj.noticeboard.provision" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Title' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" ng-disabled="!provisioningObj.noticeboard.provision" ng-model="provisioningObj.noticeboard.title" placeholder="{{'Title' | translate}}" ng-required="provisioningObj.noticeboard.provision" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Url' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" ng-disabled="!provisioningObj.noticeboard.provision" ng-model="provisioningObj.noticeboard.url" placeholder="{{'URL' | translate}}" ng-required="provisioningObj.noticeboard.provision" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Template' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <select class="form-control" ng-disabled="!provisioningObj.noticeboard.provision" ng-model="provisioningObj.noticeboard.siteTemplate" ng-required="provisioningObj.noticeboard.provision">
                            <option value="">{{'Site Template' | translate}}</option>
                            <option ng-repeat="template in siteTemplates" value="{{template.name}}" ng-selected="template.name==provisioningObj.noticeboard.siteTemplate">{{template.displayName}}</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="panel lt-module-page__content-panel">
                <div class="panel-heading">
                    {{provisioningObj.departments.title}}
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label for="provision-departments" class="fw-bold">{{'Enable' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision-departments" type="checkbox" ng-model="provisioningObj.departments.provision" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Title' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" ng-disabled="!provisioningObj.departments.provision" ng-model="provisioningObj.departments.title" placeholder="{{'Title' | translate}}" ng-required="provisioningObj.departments.provision" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Url' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" ng-disabled="!provisioningObj.departments.provision" ng-model="provisioningObj.departments.url" placeholder="{{'URL' | translate}}" ng-required="provisioningObj.departments.provision" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Container Site Template' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <select class="form-control" ng-disabled="!provisioningObj.departments.provision" ng-model="provisioningObj.departments.siteTemplate" ng-required="provisioningObj.departments.provision">
                            <option value="">{{'Site Template' | translate}}</option>
                            <option ng-repeat="template in siteTemplates" value="{{template.name}}" ng-selected="template.name==provisioningObj.departments.siteTemplate">{{template.displayName}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Department Site Template' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <select class="form-control" ng-disabled="!provisioningObj.departments.provision" ng-model="provisioningObj.departments.modulesDefaultTemplate" ng-required="provisioningObj.departments.provision">
                            <option value="">{{'Site Template' | translate}}</option>
                            <option ng-repeat="template in siteTemplates" value="{{template.name}}" ng-selected="template.name==provisioningObj.departments.modulesDefaultTemplate">{{template.displayName}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-4">
                        <label>{{'Provision all departments'}} ({{departmentsCount}})</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision-alldepartments" ng-disabled="!provisioningObj.departments.provision" type="checkbox" ng-model="provisioningObj.departments.provisionAllModules" ng-change="allDeptCheckChanged()" />
                    </div>
                </div>
                <div class="row" ng-if="provisioningObj.departments.provision && provisioningObj.departments.provisionAllModules && (departmentsCount > allDepartmentsLimit)">
                    <div class="col-sm-12">
                        <div class="alert alert-info">{{'Warning: You have more than {0} departments. Only the first {0} departments will be provisioned.' | transtale : allDepartmentsLimit }}</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12" ng-if="!provisioningObj.departments.provisionAllModules">
                        <div class="provisioning-department">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th style="width: 90px; padding-left: 0;">
                                            <input id="provision-toggle" type="checkbox" ng-model="toggleProvisionDepartments" ng-change="toggleDepartmentsSelection()" />
                                            <label style="margin:0;" for="provision-toggle">{{'Provision' | translate}}</label>
                                        </th>
                                        <th>{{'Title' | translate}}</th>
                                        <th>{{'Url' | translate}}</th>
                                    </tr>
                                </thead>
                                <tr ng-repeat="module in provisioningObj.departments.modules">
                                    <td style="padding-left: 0;">
                                        <input id="department_{{$index}}" type="checkbox" ng-model="module.provision" />
                                    </td>
                                    <td>
                                        <input class="form-control" type="text" ng-model="module.title" placeholder="{{'Title' | translate}}" ng-required="module.provision"
                                               typeahead-on-select="setUrl(module,$model)"
                                               typeahead="term for term in searchTerms($viewValue) | limitTo:10"
                                               typeahead-loading="loadingTerms"
                                               typeahead-min-length="2"
                                               typeahead-append-to-body="true"
                                               ng-style="loadingTerms?loadingImage:{}" />
                                    </td>
                                    <td>
                                        <input class="form-control" type="text" ng-model="module.url" placeholder="{{'URL' | translate}}" ng-required="module.provision" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="col-xs-12" ng-if="!provisioningObj.departments.provisionAllModules">
                        <button type="button" class="btn btn-default add-department" aria-label="Left Align" ng-click="addDepartment()">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            {{'Add department' | translate}}
                        </button>
                        <button type="button" class="btn btn-default load-department" aria-label="Center Align" ng-click="loadMoreDepartments()" ng-disabled="loadingMoreTerms || noMoreDepartmentsFound">
                            <span class="glyphicon glyphicon glyphicon-option-vertical" aria-hidden="true" ng-hide="loadingMoreTerms"></span>
                            <img ng-show="loadingMoreTerms" ng-src="{{spWebUrl}}/_layouts/15/images/gears_anv4.gif" />
                            {{'Load more departments' | translate}}
                        </button>
                    </div>
                </div>
            </div>

            <div class="panel lt-module-page__content-panel">
                <div class="panel-heading">
                    {{provisioningObj.corporatenews.title}}
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label for="provision-corporatenews fw-bold">{{'Enable' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision-corporatenews" type="checkbox" ng-model="provisioningObj.corporatenews.provision" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Title' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" ng-disabled="!provisioningObj.corporatenews.provision" ng-model="provisioningObj.corporatenews.title" placeholder="{{'Title' | translate}}" ng-required="provisioningObj.corporatenews.provision" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Url' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" ng-disabled="!provisioningObj.corporatenews.provision" ng-model="provisioningObj.corporatenews.url" placeholder="{{'URL' | translate}}" ng-required="provisioningObj.corporatenews.provision" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Template' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <select class="form-control" ng-disabled="!provisioningObj.corporatenews.provision" ng-model="provisioningObj.corporatenews.siteTemplate" ng-required="provisioningObj.corporatenews.provision">
                            <option value="">{{'Site Template' | translate}}</option>
                            <option ng-repeat="template in siteTemplates" value="{{template.name}}" ng-selected="template.name==provisioningObj.corporatenews.siteTemplate">{{template.displayName}}</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="panel lt-module-page__content-panel" ng-class="{'module-unchecked':(module.provision==false)}" ng-repeat="module in provisioningObj.modules">
                <div class="panel-heading">
                    {{module.title || 'New site'| translate}}
                    <i ng-if="module.removable==true" href="" ng-click="removeSubsite($index)" title="{{'Remove' | translate}}" class="remove-module glyphicon glyphicon-remove"></i>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label for="provision_{{$index}} fw-bold">{{'Enable' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input id="provision_{{$index}}" type="checkbox" ng-model="module.provision" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Title' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" ng-disabled="!module.provision" ng-model="module.title" placeholder="{{'Title' | translate}}" ng-required="module.provision" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Url' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" ng-disabled="!module.provision" ng-model="module.url" placeholder="{{'URL' | translate}}" ng-required="module.provision" />
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-4">
                        <label class="control-label">{{'Site Template' | translate}}</label>
                    </div>
                    <div class="col-sm-8">
                        <select class="form-control" ng-disabled="!module.provision" ng-model="module.siteTemplate" ng-required="module.provision">
                            <option value="">{{'Site Template' | translate}}</option>
                            <option ng-repeat="template in siteTemplates" value="{{template.name}}" ng-selected="template.name==module.siteTemplate">{{template.displayName}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div>
                <button type="button" class="btn btn-default add-module" aria-label="Left Align" ng-click="addSubsite()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    {{'Add subsite' | translate}}
                </button>
                <span class="pull-right" ng-disabled="provisioning == true">
                    <input id="addSampleContent" type="checkbox" ng-model="provisioningObj.addSampleContent" />
                    <label for="addSampleContent" class="mr-3">{{'Add sample content' | translate}}</label>
                    <button type="submit" class="btn btn-primary wide-config-btn add-module"
                            ng-disabled="provisioning == true"
                            ng-click="provisionContent()">
                        {{(provisioning ? 'Provisioning' : 'Provision') | translate}}
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>
