<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'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="ProjectSpace/Templates/ViewTemplates/Overview"></wizdom365-template-picker>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Columns template' | translate}}</label>
                        <wizdom365-template-picker template-url="data.columnsTemplateUrl" directory-path="ProjectSpace/Templates/ViewTemplates/Overview/Columns"></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="ProjectSpace/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="ProjectSpace/Templates/ViewTemplates/Overview/NewSiteDialog"></wizdom365-template-picker>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Instance id' | translate}}</label>
                        <input type="text" class="form-control" ng-model="data.instanceId" />
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Items per page' | translate}}</label>
                        <input type="text" class="form-control" ng-model="data.sitesPerPage" />
                    </div>
                    <!-- Selected roles -->
                    <div class="form-group" ng-if="roleDefinitions">
                        <label class="control-label">{{'Selected roles (Only show workspaces where you have the selected roles)' | translate}}</label>
                        <div class="input-group">
                            <select class="form-control"
                                    ng-model="selectedRoles"
                                    ng-options="role.name for role in roleDefinitions | filter:filterAddedRoles track by role.id">
                            </select>
                            <span class="input-group-addon" ng-click="addRole(selectedRoles.name)">
                                {{'Add' | translate}}
                            </span>
                        </div>
                        <br />
                        <ul class="list-group" ng-model="data.selectedRoles">
                            <li class="list-group-item" ng-repeat="role in data.selectedRoles track by $index">
                                <span>{{role}}</span>
                                <span class="badge pointer pull-right" ng-click="removeRole($index)">
                                    {{'Remove' | translate}}
                                </span>
                            </li>
                        </ul>
                    </div>
                    <!-- Selected metadata-->
                    <div class="form-group" ng-if="metadataDefinitions">
                        <label class="control-label">{{'Selected metadata' | translate}}</label>
                        <div class="input-group">
                            <select class="form-control" 
                                    ng-model="selectedMetadata" 
                                    ng-options="def.name for def in metadataDefinitions | filter:filterAlreadyAdded track by def.id">
                            </select>
                            <span class="input-group-addon" ng-click="addMetadata(selectedMetadata.name);">{{'Add' | translate}}</span>
                        </div>
                        <br />
                        <ul class="list-group" ui-sortable="" ng-model="data.selectedMetadata">
                            <li style="cursor:move;" class="list-group-item" ng-repeat="prop in data.selectedMetadata track by $index">
                                <span>{{prop}}</span>
                                <span class="badge" style="cursor:pointer; float:right" ng-click="removeMetadata($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>