<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Course overview' | translate}}</h1>
</div>
<div class="modal-body">
    <form>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="control-label">{{'Template' | translate}}</label>
                        <wizdom365-template-picker template-url="data.templateUrl" directory-path="CourseManagement/Templates/ViewTemplates/Overview"></wizdom365-template-picker>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Filters template' | translate}}</label>
                        <wizdom365-template-picker template-url="data.filtersTemplateUrl" directory-path="CourseManagement/Templates/ViewTemplates/Overview/Filters"></wizdom365-template-picker>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'New site dialog template' | translate}}</label>
                        <wizdom365-template-picker template-url="data.newSiteTemplateUrl" directory-path="CourseManagement/Templates/ViewTemplates/Overview/NewSiteDialog"></wizdom365-template-picker>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Instance' | translate}}</label>
                        <div wizdom365-Business-Apps-Instance-Picker
                             appname="CourseManagement"
                             ng-model="data.instanceId">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Courses per page' | translate}}</label>
                        <input type="text" class="form-control" ng-model="data.sitesPerPage" />
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Url for details page' | translate}}</label>
                        <input type="text" class="form-control" ng-model="data.detailPage" />
                    </div>

                    <!-- Selected sitecreator metadata-->
                    <div class="form-group" ng-if="metadataDefinitions">
                        <label class="control-label">{{'Selected sitecreator metadata filters' | translate}}</label>
                        <div class="input-group">
                            <select class="form-control"
                                    ng-model="selectedSitecreatorMetadata"
                                    ng-options="def.displayName | translate for def in metadataDefinitions | filter:filterAlreadyAdded track by def.id"></select>
                            <span class="input-group-addon" ng-click="addSitecreatorMetadata(selectedSitecreatorMetadata);">{{'Add' | translate}}</span>
                        </div>
                        <br />
                        <ul class="list-group" ui-sortable="" ng-model="displayData.selectedSitecreatorMetadata">
                            <li style="cursor:move;" class="list-group-item" ng-repeat="prop in displayData.selectedSitecreatorMetadata track by $index">
                                <span>{{prop.name | translate}}</span>
                                <span class="badge" style="cursor:pointer; float:right" ng-click="removeSitecreatorMetadata($index)">{{'Remove' | translate}}</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Selected metadata-->
                    <div class="form-group" ng-if="metadataDefinitions">
                        <label class="control-label">{{'Selected metadata filters' | translate}}</label>
                        <div class="input-group">
                            <select class="form-control"
                                    ng-model="selectedMetadata"
                                    ng-options="def.displayName | translate for def in metadataDefinitions | filter:filterAlreadyAdded track by def.id"></select>
                            <span class="input-group-addon" ng-click="addMetadata(selectedMetadata);">{{'Add' | translate}}</span>
                        </div>
                        <br />
                        <ul class="list-group" ui-sortable="" ng-model="displayData.selectedMetadata">
                            <li style="cursor:move;" class="list-group-item" ng-repeat="prop in displayData.selectedMetadata track by $index">
                                <span>{{prop.name | translate}}</span>
                                <span class="badge" style="cursor:pointer; float:right" ng-click="removeMetadata($index)">{{'Remove' | translate}}</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Selected roles -->
                    <div class="form-group" ng-if="siteRoles">
                        <label class="control-label">{{'Selected role filters' | translate}}</label>
                        <div class="input-group">
                            <select class="form-control"
                                    ng-model="selectedRole"
                                    ng-options="def.name | translate for def in siteRoles | orderBy:sortRoleBySortOrder | filter:filterRoleAlreadyAdded track by def.id"></select>
                            <span class="input-group-addon" ng-click="addRole(selectedRole);">{{'Add' | translate}}</span>
                        </div>
                        <br />
                        <ul class="list-group" ui-sortable="" ng-model="displayData.selectedRoles">
                            <li style="cursor:move;" class="list-group-item" ng-repeat="prop in displayData.selectedRoles track by $index">
                                <span>{{prop.name | translate}}</span>
                                <span class="badge" style="cursor:pointer; float:right" ng-click="removeRole($index)">{{'Remove' | translate}}</span>
                            </li>
                        </ul>
                    </div>


                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-success wiz-btn-padding" ng-click="updateConfig()">{{'Save' | translate}}</button>
    <button class="btn btn-default wiz-btn-padding" ng-disabled="loading" ng-click="cancel();">{{"Cancel" | translate}}</button>
</div>