<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' | translate}}</label>
                        <div wizdom365-Business-Apps-Instance-Picker
                             appname="Project space"
                             ng-model="data.instanceId">
                        </div>
                    </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>
                        <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="choosableColumns">
                        <label class="control-label">{{'Selected columns (metadata and roles)' | translate}}</label>
                        <div class="input-group">
                            <select class="form-control"
                                    ng-model="selectedMetadata"
                                    ng-options="col.name group by col.columnType | translate  for col in choosableColumns | filter:filterAlreadyAdded"></select>
                            <span class="input-group-addon" ng-click="addColumn(selectedMetadata);">{{'Add' | translate}}</span>
                        </div>
                        <ul class="list-group" ui-sortable="" ng-model="data.selectedMetadata">
                            <li style="cursor:move;" class="list-group-item" ng-repeat="prop in data.selectedMetadata | filter:filterRemoveType track by $index">
                                <span>{{filterRemoveType(prop)}}</span>
                                <span class="badge" style="cursor:pointer; float:right" ng-click="removeColumn($index)">{{'Remove' | translate}}</span>
                            </li>
                        </ul>
                    </div>

                    <div class="form-group">
                        <label>
                            <input type="checkbox" ng-model="data.showSiteCreationStatus"> {{'Show site status column' | translate}}
                        </label>
                    </div>
                    <!--<div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="data.showEditMetadata"> {{'Allow metadata to be updated, directly from the overview' | translate}}
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="data.showEditRoles"> {{'Allow roles to be updated, directly from the overview' | translate}}
                            </label>
                        </div>
                    </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>