<script type="text/ng-template" id="popover-content-user.html">
	<h5>{{'security.user.may' | translate}}</h5>
	<ul>
        <li>{{'security.use.gdb' | translate}}</li>
	    <li>{{'security.grant.read.access' | translate}}</li>
		<li>{{'security.grant.read.write.access' | translate}}</li>
    </ul>
</script>

<script type="text/ng-template" id="popover-content-repo-manager.html">
	<h5>{{'security.repo.manager.may' | translate}}</h5>
	<ul>
		<li>{{'security.use.gdb' | translate}}</li>
		<li>{{'security.read.write.all.repos' | translate}}</li>
		<li>{{'security.create.edit.delete.repos' | translate}}</li>
		<li>{{'security.access.monitoring' | translate}}</li>
	</ul>
</script>

<script type="text/ng-template" id="popover-content-admin.html">
	<h5>{{'security.admin.may' | translate}}</h5>
	<ul>
		<li>{{'security.use.gdb' | translate}}</li>
		<li>{{'security.read.write.all.repos' | translate}}</li>
		<li>{{'security.create.edit.delete.repos' | translate}}</li>
		<li>{{'security.access.monitoring' | translate}}</li>
		<li>{{'security.attach.remote.locations' | translate}}</li>
		<li>{{'security.manage.users.access' | translate}}</li>
		<li>{{'security.manage.cluster' | translate}}</li>
		<li>{{'security.view.sys.info' | translate}}</li>
	</ul>
</script>

<link href="css/lib/ng-tags-input/ng-tags-input.min.css?v=10.5.1" rel="stylesheet"/>

<h1>{{pageTitle}}</h1>

<div id="wb-user" ng-hide="loader">
	<form name="form" class="form newUserForm userForm editUserContainer" ng-submit="submit()" novalidate>
		<div class="row">
			<div class="col-md-6 us-left-col">
				<div class="card login-credentials" ng-hide="isOverrideAuth() || !isLocalAuthentication()">
					<div class="card-block">
						<h3>{{'view.login.title' | translate}}</h3>
						<div class="form-group" ng-class="{'has-danger': usernameError}">
							<div class="input-group">
								<span class="input-group-addon" gdb-tooltip="{{'security.table.username' | translate}}"><em class="icon-user icon-2x text-muted"></em></span>
								<input id="wb-user-username" placeholder="{{'security.table.username' | translate}}" name="username" class="form-control form-control-lg" type="text" ng-model="user.username" ng-readonly="mode !== 'add'">
							</div>
							<div ng-show="usernameError" class="form-control-feedback">{{usernameError}}</div>
						</div>
						<div class="form-group" ng-class="{'has-danger': passwordError}">
							<div class="input-group">
								<span class="input-group-addon" gdb-tooltip="{{'security.password.placeholder' | translate}}"><em class="icon-lock icon-2x text-muted"></em></span>
								<input id="wb-user-password" placeholder="{{passwordPlaceholder | translate}}" name="password" class="form-control form-control-lg" type="password"	ng-model="user.password" ng-hide="user.external || hasExternalAuthUser()" ng-readonly="noPassword">
								<span ng-show="user.external || hasExternalAuthUser()">{{'security.auth.from.external.module' | translate}}</span>
							</div>
							<div ng-show="passwordError" class="form-control-feedback">{{passwordError}}</div>
						</div>
						<div class="form-group" ng-class="{'has-danger': confirmPasswordError}" ng-hide="user.external || hasExternalAuthUser()">
							<div class="input-group">
								<span class="input-group-addon" gdb-tooltip="{{'security.password.confirm' | translate}}"><em class="icon-lock icon-2x text-muted"></em></span>
								<input id="wb-user-confirmpassword" placeholder="{{'security.password.confirm' | translate}}" name="password_confirm" class="form-control form-control-lg" type="password" ng-model="user.confirmpassword" ng-readonly="noPassword">
							</div>
							<div ng-show="confirmPasswordError" class="form-control-feedback">{{confirmPasswordError}}</div>
						</div>
                        <div>
                            <label class="d-block">
                                <input type="checkbox" id="noPassword" ng-model="noPassword" ng-change="setNoPassword()">
                                <span ng-show="mode === 'add'">{{'security.dont.set.password' | translate}} </span>
                                <span ng-show="mode !== 'add'">{{'security.unset.password' | translate}} </span>
                            </label>
                        </div>
					</div>
				</div>

				<div class="card sparql-editor-settings" id="user-settings">
					<div class="card-block">
						<h3>{{'security.user.settings' | translate}}</h3>

						<div id="sameas-on" class="mb-1">
							<span class="sameas-label">
								{{'security.expand.sameAs.is' | translate}}
								<span class="tag {{user.appSettings.DEFAULT_SAMEAS ? 'tag-primary' : 'tag-default'}}">
									{{user.appSettings.DEFAULT_SAMEAS ? 'common.on.btn' : 'common.off.btn' | translate}}
								</span>
							</span>
							<span gdb-tooltip="{{shouldDisableSameAs() ? 'core.require.inferred' : 'security.tooltip.click.me' | translate}}" tooltip-placement="top"
								  ng-click="user.appSettings.DEFAULT_SAMEAS = !user.appSettings.DEFAULT_SAMEAS"
								  class="switch mr-0">
								<input  id="sameAsCheck" type="checkbox" class="switch"
                                        ng-checked="user.appSettings.DEFAULT_SAMEAS"
                                        ng-disabled="shouldDisableSameAs()"/>
								<label for="sameas-on"></label>
							</span>
							{{'security.default.editor.graph' | translate}}
						</div>

						<div id="inference-on" class="mb-1">
							<span class="inference-label">
								{{'security.inference.is' | translate}}
								<span class="tag {{user.appSettings.DEFAULT_INFERENCE ? 'tag-primary' : 'tag-default'}}">
									{{user.appSettings.DEFAULT_INFERENCE ? 'common.on.btn' : 'common.off.btn' | translate}}
								</span>
							</span>
							<span gdb-tooltip="{{'security.tooltip.click.me' | translate}}" tooltip-placement="top"
								  ng-click="user.appSettings.DEFAULT_INFERENCE = !user.appSettings.DEFAULT_INFERENCE"
								  class="switch mr-0">
								<input type="checkbox" class="switch" ng-checked="user.appSettings.DEFAULT_INFERENCE"/>
								<label for="inference-on"></label>
							</span>
                            {{'security.default.editor.graph' | translate}}
						</div>

                        <div id="schema-on" class="mb-1">
							<span class="schema-label">
								{{'security.show.schema' | translate}}
								<span class="tag {{user.appSettings.DEFAULT_VIS_GRAPH_SCHEMA ? 'tag-primary' : 'tag-default'}}">
									{{user.appSettings.DEFAULT_VIS_GRAPH_SCHEMA ? 'common.on.btn' : 'common.off.btn' | translate}}
								</span>
                                <span gdb-tooltip="{{'security.tooltip.click.me' | translate}}" tooltip-placement="top"
                                      ng-click="user.appSettings.DEFAULT_VIS_GRAPH_SCHEMA = !user.appSettings.DEFAULT_VIS_GRAPH_SCHEMA"
                                      class="switch mr-0">
								<input type="checkbox" class="switch" ng-checked="user.appSettings.DEFAULT_VIS_GRAPH_SCHEMA"/>
								<label for="schema-on"></label>
							</span>
                                {{'security.default.visual.graph' |  translate}}
							</span>
                        </div>

						<label class="d-block">
							<input type="checkbox" ng-model="user.appSettings.EXECUTE_COUNT" id="defaultCount" checked="appSettings.EXECUTE_COUNT">
							{{'security.count.total.results' | translate}}
						</label>

						<label class="d-block">
							<input type="checkbox" ng-model="user.appSettings.IGNORE_SHARED_QUERIES" id="ignore-shared" checked="appSettings.IGNORE_SHARED_QUERIES">
							{{'security.ignore.shared.queries' | translate}}
						</label>

					</div>
				</div>

				<div class="card" id="workbench-settings" ng-if="showWorkbenchSettings">
					<div class="card-block">
						<h3>{{'security.workbench.settings.title' | translate}}
							<em class="icon-info text-tertiary small" gdb-tooltip="{{'security.workbench.settings.theme.tooltip' | translate}}"></em></h3>
						<div>
                            <div class="form-group">
                                <label class="col-lg-2">{{'security.workbench.settings.theme.label' | translate}}</label>
                                <div class="btn-group theme-selector-dropdown" uib-dropdown>
                                    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle theme-selector-dropdown-btn" uib-dropdown-toggle>
                                        {{selectedTheme.label}}
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li ng-repeat="theme in themes">
                                            <a ng-click="setTheme(theme)" class="dropdown-item">{{theme.label}}</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-2">{{'security.workbench.settings.theme.mode.label' | translate}}</label>
                                <div class="radio">
                                    <label class="px-1">
                                        <input type="radio" value="light" ng-model="workbenchSettings.mode" ng-change="setThemeMode()"/>
                                        {{'security.workbench.settings.theme.mode.light' | translate}}
                                    </label>
                                    <label class="px-1">
                                        <input type="radio" value="dark" ng-model="workbenchSettings.mode" ng-change="setThemeMode()"/>
                                        {{'security.workbench.settings.theme.mode.dark' | translate}}
                                    </label>
                                </div>
                            </div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-md-6 us-right-col" ng-hide="!isLocalAuthentication()">
				<div class="card user-role" id="user-roles">
					<div class="card-block">
						<h3>{{'security.user.role' | translate}}</h3>
						<label class="mr-1"
							   uib-popover-template="'popover-content-user.html'"
							   popover-trigger="mouseenter"
							   popover-placement="bottom">
							<input type="radio" ng-model="userType" id="roleUser" value="user" ng-disabled="hasEditRestrictions()" >
							{{'security.user.label' | translate}}
						</label>
						<label class="mr-1"
							   uib-popover-template="'popover-content-repo-manager.html'"
							   popover-trigger="mouseenter"
							   popover-placement="bottom">
							<input type="radio" ng-model="userType" id="roleRepoAdmin" value="repoManager" ng-disabled="hasEditRestrictions()">
							{{'security.repo.manager.label' | translate}}
						</label>
						<label uib-popover-template="'popover-content-admin.html'"
							   popover-trigger="mouseenter"
							   popover-placement="bottom">
							<input type="radio" ng-model="userType" id="roleAdmin" value="admin" ng-disabled="hasEditRestrictions()">
							{{'security.admin.label' | translate}}
						</label>
					</div>
				</div>

                <div class="card user-custom-roles" id="user-custom-roles">
                    <div class="card-block">
                        <h3>{{'security.user.custom_role' | translate}}</h3>
                        <div class="input-group">
                            <tags-input class="wb-tags-input" ng-model="customRoles" min-length="2"
                                        ng-disabled="!isUser() || mode === 'settings'"
                                        use-strings="true"
                                        add-on-space="true"
                                        add-on-comma="true"
                                        add-on-paste="true"
                                        replace-spaces-with-dashes="false"
                                        paste-split-pattern="[\s+]"
                                        on-tag-added="addCustomRole($tag)"
                                        placeholder="{{'security.user.add.custom_role.msg' | translate}}"></tags-input>
                        </div>
                    </div>
                </div>

				<div id="user-repos"  class="card user-repositories">
					<div class="card-block">
						<h3>{{'security.repo.rights' | translate}}</h3>
						<div class="has-danger">
							<p ng-show="repositoryCheckError" class="form-control-feedback">
								{{'security.user.rights' | translate}}
							</p>
						</div>
                        <div class="scrollable-table">
                            <table class="table table-hover table-sm" aria-describedby="User rights table">
                                <thead>
                                <tr>
                                    <th id="repositoryIdColumn">{{'security.repository.title' | translate}}</th>
                                    <th id="readRightsColumn" class="text-xs-center"><em class="icon-eye icon-lg" gdb-tooltip="{{'security.tooltip.read' | translate}}"></em></th>
                                    <th id="writeRightColumn" class="text-xs-center"><em class="icon-edit icon-lg" gdb-tooltip="{{'security.tooltip.write' | translate}}"></em></th>
                                </tr>
                                <tr>
                                    <th>{{'security.any.data.repo' | translate}}
                                        <em class="icon-info text-tertiary" gdb-tooltip="{{'security.data.repos' | translate}}"></em>
                                    </th>
                                    <th class="text-xs-center">
                                        <input class="read" type="checkbox" ng-model="grantedAuthorities.READ_REPO['*']"  ng-checked="hasReadPermission('*')" ng-disabled="readCheckDisabled('*')" ng-click="setGrantedAuthorities()">
                                    </th>
                                    <th class="text-xs-center">
                                        <input class="write" type="checkbox" ng-model="grantedAuthorities.WRITE_REPO['*']" ng-checked="hasWritePermission('*')" ng-disabled="writeCheckDisabled('*')" ng-click="setGrantedAuthorities()">
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <div>
                                    <tr ng-repeat="repository in getReadableRepositories() | orderBy: ['location', 'id']">
                                        <td class="repository-name">{{repository.id}}<small> &middot; {{repository.location ? repository.location : 'Local'}}</small></td>
                                        <td class="text-xs-center read-rights"><input class="read" type="checkbox" ng-model="grantedAuthorities.READ_REPO[createUniqueKey(repository)]"  ng-checked="hasReadPermission(repository)" ng-disabled="readCheckDisabled(repository)" ng-click="setGrantedAuthorities()"></td>
                                        <td class="text-xs-center write-rights"><input class="write" type="checkbox" ng-model="grantedAuthorities.WRITE_REPO[createUniqueKey(repository)]" ng-checked="hasWritePermission(repository)" ng-disabled="writeCheckDisabled(repository)" ng-click="setGrantedAuthorities()"></td>
                                    </tr>
                                </div>
                                </tbody>
                            </table>
                        </div>
					</div>
				</div>
            </div>
		</div>

		<div class="text-right">
            <button id="wb-user-goBack" class="btn btn-secondary" type="button" ng-click="goBack()">{{'common.cancel.btn' | translate}}</button>
            <button id="wb-user-submit" class="btn btn-primary" type="submit">{{saveButtonText}}</button>
		</div>
	</form>
</div>
<div class="ot-loader ot-main-loader" onto-loader size="50" ng-show="loader"></div>



