<div class="projectspace">


    <div class="panel panel-default" ng-show="settingsField.type == ''">
        <div class="panel-heading">
            <h3 class="panel-title">{{'Workspace type' | translate}}: {{sitetype.name}}</h3>
        </div>
        <div class="panel-body"></div>
    </div>

    <div ng-show="settingsField.type !== ''">
        <form class="form position-relative" role="form" name="form" ng-show="settingsField.type !== ''">
            <!-- Buttons -->
            <div class="saveConfigurationButton abs-position">
                <button class="btn btn-danger"
                        ng-disabled="saving"
                        ng-click="deleteCourseType()"
                        ng-confirm-click="Are you sure to delete this?">
                    {{saving ? 'Saving' : 'Delete workspace type' | translate}}
                </button>
                <button class="btn btn-primary pull-right"
                        ng-disabled="saving"
                        ng-click="saveSiteType(selectedTemplate, selectedModernTemplate)">
                    {{saving ? 'Saving' : 'Save configuration' | translate}}
                </button>
            </div>
            <!-- Project type name-->
            <div class="panel panel-default lt-module-page__content-panel">
                <div class="panel-heading">{{'Workspace type' | translate}}: {{sitetype.name}}</div>
                <div class="panel-body">
                    <div class="wizdom-controls">
                        <div class="row wizdom-c ontrols-row noborder">

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>{{'Name' | translate}}</label>
                                    <input type="text" class="form-control" ng-model="sitetype.name">
                                </div>
                                <div class="form-group">
                                    <label>{{'Image' | translate}}</label>
                                    <wizdom365-image-picker ng-model="sitetype.image" wizdommodule="ProjectSpace">
                                    </wizdom365-image-picker>
                                    <img ng-src="{{sitetype.image}}" style="height:150px; width: 250px" ng-show="sitetype.image" />
                                    <a class="glyphicon glyphicon-trash" aria-hidden="true" ng-show="sitetype.image" ng-click="sitetype.image = ''"></a>
                                </div>
                                <div class="form-group">
                                    <label>{{'Description' | translate}}</label>
                                    <textarea type="text"
                                                class="form-control"
                                                ui-tinymce
                                                toolbar-configuration="Workspaces"
                                                placeholder="{{options.placeholder}}"
                                                ng-model="sitetype.description"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>{{'Noticeboard channels' | translate}}</label>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" ng-model="sitetype.autocreateNoticeboardChannel" />
                                            {{'Create a Noticeboard channel with every new workspace' | translate}}
                                        </label>
                                        <br />
                                        <label class="small">
                                            *{{'Note that having large number of Noticeboard channels with unique permissions, will impact Noticeboard general performance' | translate}}
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>{{'Parent noticeboard channel' | translate}}</label>
                                    <select class="form-control" ng-model="sitetype.containerChannel" ng-options="channel.id as (channel.name | wizdom365NoticeboardChannelLevel:channel.level) for channel in noticeboardChannels"></select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="panel panel-default lt-module-page__content-panel">
                                    <div class="panel-heading">{{'SharePoint options' | translate}}</div>
                                    <div class="panel-body">
                                        <div>
                                            <div>
                                                <div>
                                                    <div ng-hide="wizdomEnvironmentIsOnPrem">
                                                        <label>{{'Classic or Modern' | translate}}</label>
                                                        <ul class="nav nav-pills">
                                                            <li role="presentation" ng-class="{active: sitetype.settingsSharepointTab == 'classic'}"><a href="#" class="btn" ng-click="toggleSiteOrGroup('classic')">{{'Classic SharePoint' | translate}}</a></li>
                                                            <li role="presentation" ng-class="{active: sitetype.settingsSharepointTab == 'modern'}"><a href="#" class="btn" ng-click="toggleSiteOrGroup('modern')">{{'Modern SharePoint' | translate}}</a></li>
                                                        </ul>
                                                        <br />
                                                    </div>
                                                    <div ng-show="sitetype.settingsSharepointTab == 'classic'">
                                                        <div class="form-group">
                                                            <label>{{'Template' | translate}}</label>
                                                            <select class="form-control" ng-model="selectedTemplate" ng-options="template.displayName group by template.group for template in templates"></select>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>{{'Associated groups' | translate}}</label>
                                                            <div class="checkbox">
                                                                <label>
                                                                    <input type="checkbox" ng-model="sitetype.addDefaultAssociatedGroups" />
                                                                    {{'Add default associated groups' | translate}}
                                                                </label>
                                                            </div>
                                                            <div ng-show="sitetype.addDefaultAssociatedGroups">
                                                                <div class="radio">
                                                                    <label>
                                                                        <input type="radio" ng-model="sitetype.createDefaultAssociatedGroups" ng-value="true" /> {{'Create new groups' | translate}}
                                                                    </label>
                                                                </div>
                                                                <div class="radio">
                                                                    <label>
                                                                        <input type="radio" ng-model="sitetype.createDefaultAssociatedGroups" ng-value="false" /> {{'Use existing groups' | translate}}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>{{'New workspace' | translate}}</label>
                                                            <div class="checkbox" style="margin: 0;">
                                                                <label for="autocreateSharepointSite">
                                                                    <input type="checkbox" id="autocreateSharepointSite" ng-model="sitetype.autocreateSharepointSite" />
                                                                    {{'Create a SharePoint Classic site with every new workspace' | translate}}
                                                                    <br />
                                                                    <small>{{'Selecting this will disable the auto creation of a SharePoint Modern site for every new workspace' | translate}}</small>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div ng-show="sitetype.settingsSharepointTab == 'modern'">
                                                        <div class="alert alert-danger">
                                                            {{'Info' | translate}}
                                                            <ul>
                                                                <li>{{'The Modern site will be created in same language as the site where the user initiated the creation from (typically the site with the overview webpart)' | translate}}</li>
                                                                <li>{{'The Modern site will be created with url ".../sites/[workspace name]"' | translate}}</li>
                                                            </ul>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>{{'Template' | translate}}</label>
                                                            <select class="form-control" ng-model="selectedModernTemplate" ng-options="template.displayName group by template.group for template in modernTemplates"></select>
                                                            <small ng-show='sitetype.settingsSharepointTab == "modern" && selectedModernTemplate && selectedModernTemplate.webTemplate.indexOf("64") == 0'>
                                                                {{'The selected template is based on a Modern Teamsite that also creates an Office 365 Group.' | translate}}
                                                            </small>
                                                            <small ng-show='sitetype.settingsSharepointTab == "modern" && selectedModernTemplate && selectedModernTemplate.webTemplate.indexOf("68") == 0'>
                                                                {{'The selected template is based on a Modern Communicationsite.' | translate}}
                                                            </small>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>
                                                                {{'Role syncronization' | translate}}
                                                            </label>
                                                            <div class="small">
                                                                {{'Add or edit roles and select the Modern site permissions' | translate }}
                                                            </div>
                                                            <div>
                                                                <br />
                                                                <div>
                                                                    {{'Owners will be syncronized from these roles' | translate}}
                                                                </div>
                                                                <div ng-if="modernSiteOwnerRoles.length == 0">
                                                                    <i style="padding-left:17px" class="glyphicon glyphicon-ban-circle"></i>
                                                                    <span style="padding-left:5px">{{'No roles' | translate}}</span>
                                                                </div>
                                                                <ul>
                                                                    <li ng-repeat="role in modernSiteOwnerRoles">{{role.name}}</li>
                                                                </ul>
                                                            </div>
                                                            <div>
                                                                <br />
                                                                <div>
                                                                    {{'Members will be syncronized from these roles' | translate}}
                                                                </div>
                                                                <div ng-if="modernSiteMemberRoles.length == 0">
                                                                    <i style="padding-left:17px" class="glyphicon glyphicon-ban-circle"></i>
                                                                    <span style="padding-left:5px">{{'No roles' | translate}}</span>
                                                                </div>
                                                                <ul>
                                                                    <li ng-repeat="role in modernSiteMemberRoles">{{role.name}}</li>
                                                                </ul>
                                                            </div>
                                                            <div ng-hide='sitetype.settingsSharepointTab == "modern" && selectedModernTemplate && selectedModernTemplate.webTemplate.indexOf("64") == 0'>
                                                                <br />
                                                                <div>
                                                                    {{'Visitors will be syncronized from these roles' | translate}}
                                                                </div>
                                                                <div ng-if="modernSiteGuestRoles.length == 0">
                                                                    <i style="padding-left:17px" class="glyphicon glyphicon-ban-circle"></i>
                                                                    <span style="padding-left:5px">{{'No roles' | translate}}</span>
                                                                </div>
                                                                <ul>
                                                                    <li ng-repeat="role in modernSiteGuestRoles">{{role.name}}</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>{{'Prefix' | translate}}</label>
                                                            <input type="text" class="form-control" name="prefix" ng-model="sitetype.sitePrefix" ng-model-options="{ debounce: 500 }" />
                                                            <p class="help-block">{{'The prefix will be applied to the Office365 Group name, email and SharePoint site url. It will not be applied to Team name and SharePoint site title.' | translate}}</p>
                                                            <p class="help-block">{{'All user profile properties are supported as tokens. Token examples: [Department], [Title], [SPS-JobTitle], [SPS-Location], [UserName], [FirstName], [LastName].' | translate}}</p>
                                                            <p class="help-block">{{'Result ex.' | translate}} https://tenant.sharepoint.com/sites/<span ng-show="sitetype.sitePrefix"><b>{{sitetype.sitePrefix}}</b></span>[workspace title] </p>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>{{'New workspace' | translate}}</label>
                                                            <div class="checkbox" style="margin: 0;">
                                                                <label for="autocreateModernSite">
                                                                    <input type="checkbox" id="autocreateModernSite" ng-model="sitetype.autocreateModernSite" />
                                                                    {{'Create a SharePoint Modern site with every new workspace' | translate}}
                                                                    <br />
                                                                    <small>{{'Selecting this will disable the auto creation of a SharePoint Classic site for every new workspace' | translate}}</small>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div wizdom365-Business-Apps-Sitetype-Settings-Repository instance="instance" sitetype="sitetype" save-function="saveRepositorySettings" ng-show="sitetype.settingsSharepointTab == 'classic'"></div>
                                <div class="panel panel-default lt-module-page__content-panel" ng-show='sitetype.settingsSharepointTab == "modern" && selectedModernTemplate && selectedModernTemplate.webTemplate.indexOf("64") == 0'>
                                    <div class="panel-heading">{{'Office 365 group options' | translate}}</div>
                                    <div class="panel-body">
                                        <div>
                                            <div class="alert alert-danger" ng-if="o365GroupCreationWarning">
                                                <strong>{{'The Wizdom active directory app problems' | translate}}</strong><br />
                                                {{o365GroupCreationWarning}}
                                                <br /><br />
                                                <a style="cursor:pointer" ng-click="validateAppAdminGroupsPermissions()">Click to rerun and test again</a>
                                            </div>
                                            <div class="alert alert-danger" ng-if="teamCreationWarning">
                                                <strong>{{'Graph user configuration problems' | translate}}</strong><br />
                                                {{teamCreationWarning}}
                                                <br /><br />
                                                <a style="cursor:pointer" ng-click="validateGraphUser()">Click to rerun and test again</a>
                                            </div>
                                            <div>
                                                <div>
                                                    <div class="form-group">
                                                        <div>
                                                            {{'An Office 365 Group is always created together with a Modern Teamsite.' | translate}}
                                                        </div>
                                                        <br />
                                                        <label>
                                                            {{'The Office 365 Group will be created as' | translate}}
                                                        </label>
                                                        <div ng-show='selectedModernTemplate.webTemplate.toLowerCase().indexOf(":public") < 0 && selectedModernTemplate.webTemplate.toLowerCase().indexOf(":private") < 0'>
                                                            <div class="radio">
                                                                <label>
                                                                    <input type="radio" ng-model="sitetype.o365GroupPublic" ng-value="true" /> {{'Public' | translate}}
                                                                </label>
                                                            </div>
                                                            <div class="radio">
                                                                <label>
                                                                    <input type="radio" ng-model="sitetype.o365GroupPublic" ng-value="false" /> {{'Private' | translate}}
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div ng-show='selectedModernTemplate.webTemplate.toLowerCase().indexOf(":public") > 0 || selectedModernTemplate.webTemplate.toLowerCase().indexOf(":private") > 0'>
                                                            <span ng-if='selectedModernTemplate.webTemplate.toLowerCase().indexOf(":public") > 0'>Public. </span>
                                                            <span ng-if='selectedModernTemplate.webTemplate.toLowerCase().indexOf(":private") > 0'>Private. </span>
                                                            {{'Forced by the webtemplate property in the selected template' | translate}}
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>
                                                            {{'Features' | translate}}
                                                        </label>
                                                        <div class="checkbox" style="margin-top: 0px; margin-bottom: 0px;">
                                                            <label>
                                                                <input type="checkbox" ng-model="sitetype.autocreateTeamWithO365Group" />
                                                                {{'Include Team' | translate}}
                                                                <br />
                                                                <small>
                                                                    {{'A Team will be created as part of the group' | translate }}
                                                                </small>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>
                                                            {{'Teams App ID (GUID)' | translate}}
                                                        </label>
                                                        <input type="text" class="form-control" ng-model="sitetype.teamsAppId">
                                                        <small>
                                                            {{'Provide the App ID for the Wizdom Workspaces Teams App.' | translate }}
                                                        </small>
                                                    </div>
                                                    <div class="alert alert-danger">
                                                        <p>{{'The Wizdom Workspace Teams app are required to manage workspace metadata from within the Teams.' | translate}}</p>
                                                        <br />
                                                        <ol>
                                                            <li>
                                                                {{'Download the App package zip file with the download button below.' | translate}}
                                                            </li>
                                                            <li>
                                                                {{'In the Teams client find the "Store" and click "Upload a custom app".' | translate}}
                                                            </li>
                                                            <li>
                                                                {{'Locate the app in the store after uploading and click "Copy link".' | translate}}
                                                            </li>
                                                            <li>
                                                                {{'The link will contain the App ID that needs to be provided above.' | translate}}
                                                                <br />
                                                                {{'Link example: https://teams.microsoft.com/l/app/[AppId].' | translate}}
                                                            </li>
                                                        </ol>
                                                        <button class="btn btn-warning wide-config-btn" ng-click="downloadTeamsApp()">
                                                            Download
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

