<!-- ============================= --> 
<!--        User Profile Page      --> 
<!-- ============================= -->
<div id="main">
    <script type="application/javascript">
		$(document).ready(function() {
			if ({{ 'true' if (errors | length) > 0 else 'false' }}) {
				show_hide(".shouldShow", ".shouldHide");
			}
		});
	</script>
	{% if keycloakConfigWebFile is not defined%}
    <form method="post">
	{% endif %}
	    <aside class="header-component toolbar can-extend auto-extends">
	    	<h3>User Profile</h3>
		  <div class="extension">
		   <div class="dropdown-pane">
	        <ul>
				{% if keycloakConfigWebFile is defined%}
					<li class="action-dismiss"><button onclick="keycloak_logout()" class="action action-cancel" tabindex="50">Logout</button></li>
				{% else %}
		            <li class="action-dismiss"><button type="submit" name="logout" value="logout" class="action action-cancel" tabindex="50">Logout</button></li>
				{% endif %}
	        </ul>
	       </div>
	      </div>
	    </aside>
	{% if keycloakConfigWebFile is not defined%}
    </form>
	{% endif %}

    <section class="profile">
        <h2><mark>User</mark> details</h2>
		{% if showOnlineHelp and keycloakConfigWebFile is not defined %}
			<a class="helper-hook" title="Click here to open Online-Help" href="#" onClick="showHelpOverlay('user')">?</a>
		{% endif %}
        <form method="post">
        	<dl>
            	<dt>Display name</dt>
            	<dd>{{ user.display_name }}</dd>

				<dt>Username</dt>
            	<dd>{{ user.username }}</dd>

				{% if user.role or user.is_administrator() %}
            	<dt>Role</dt>
            	<dd tabindex='3' onkeypress="redirectToHrefChild(this)">
					{% if user.role %}
            		{{ user.role | lower }}
					{% else %}
					administrator
					{% endif %}
					{% if user.is_administrator() %}
                		<a href="{{ deploy_context | safe }}/user/usermanagement" tabindex="-1"><u>manage other users</u></a>
					{% endif %}
            	</dd>
				{% endif %}

				{% if user.is_administrator() and keycloakConfigWebFile is not defined %}
            		<dt>Settings</dt>
            		<dd tabindex='3' onkeypress="redirectToHrefChild(this)">
						<a href="{{ deploy_context | safe }}/settings/settings/" tabindex="-1"><u>TVB Settings</u></a>
            		</dd>
				{% endif %}

            	<dt title="Occupied disk space in MB of TVB data generated by current user.">Data</dt>
            	<dd>
            		{{ user_used_disk_human }}
           	 	</dd>

				{% if keycloakConfigWebFile is not defined%}
            	<dt>E-Mail</dt>
            	<dd class='shouldHide' id='email_display'>
            		<div id='email_label'>{{ user.email }}</div>
            		<a href='#' onclick='show_hide(".shouldShow", ".shouldHide")' tabindex="-1"><u>edit</u></a>
            	</dd>

           	 	<dd style='display:none;' class='shouldShow'>
            		<input name='email' type='text' value='{{ user.email }}'/>
            		<br/>
					{% if 'email' in errors %}
						<span class="errorMessage">{{ errors.email }}</span>
					{% endif %}
            	</dd>

            	<dt class='shouldHide'>Password</dt>

            	<dd class='shouldHide' tabindex='4' onkeypress="redirectToHrefChild(this)">
            		<a href='#' onclick='show_hide(".shouldShow", ".shouldHide")' tabindex="-1"><u>Change password</u></a>
           	 	</dd>

				<dt style='display:none;' class='shouldShow'>Old Password</dt>
				<dd style='display:none;' class='shouldShow'>
					<input name='old_password' type="password" value='' tabindex="5"/>
				</dd>

				<dt style='display:none;' class='shouldShow'>New Password</dt>
				<dd style='display:none;' class='shouldShow'>
					<input name='password' type="password" value='' tabindex="6"/>
					<br/>
					{% if 'password' in errors %}
						<span class="errorMessage">{{ errors.password }}</span>
					{% endif %}
				</dd>

				<dt style='display:none;' class='shouldShow'>Repeat new Password</dt>
				<dd style='display:none;' class='shouldShow'>
					<input name='password2' type="password" value='' tabindex="7"/>
					<br/>
					{% if 'password2' in errors %}
						<span class="errorMessage">{{ errors.password2 }}</span>
					{% endif %}
				</dd>

				<dt style='display:none;' class='shouldShow'></dt>
				<dd style='display:none;' class='shouldShow'>
			   		 <button type="submit" class="form-save" tabindex="8" name="save" value="save">Save Changes</button>
			   		 <button type="submit" class="form-cancel" tabindex="9" onclick='show_hide(".shouldHide", ".shouldShow"); return false;'>Cancel</button>
				</dd>

            	<dt>Online Help</dt>

            	<dd tabindex='10' onkeypress="redirectToHrefChild(this)">
               	 <a href="{{ deploy_context | safe }}/user/switch_online_help" tabindex="-1"><u>{{ 'deactivate' if user.is_online_help_active() else 'activate' }}</u></a>
            	</dd>
				{% else %}
				<dt>Account</dt>
            	<dd>
            		<a href='#' onclick='keycloak_account_management()' tabindex="-1"><u>Account management console</u></a>
           	 	</dd>
				{% endif %}
        	</dl>
        </form>
    </section>
	<section class="updates">
            <h2><mark>About</mark> this version</h2>
            <ul>
	            <li>You are running TVB version <em id="currentVersion" onclick="$('#currentVersion').copy()">{{ currentVersionLongText }}</em></li>
	            <li>You may use this version on your <em>personal computer</em>.</li>
	            <li>
	            	<p>You may also install it on a <em>server</em> and make it accessible to an unlimited number of users.</p>
	            	<p>Please make sure that your server has appropriate hardware ressources like a decent multi-core CPU and at least 16 GB of RAM.</p>
	            </li>
	            <li>
	            	<p>You may also install it on a <em>cluster</em> (similar to a server installation but with parallelization support).</p>
	            	<p>Please note that for cluster installations, OAR is expected to be configured separately from TVB.</p>
	            </li>
            </ul>
	</section>
</div>