{#include webui/mainWebPageTemplate navbar="full" showTitle=true title="Your Profile" page='user'}
{#pageStyle}

{/pageStyle}
{#pageContent}
{! TODO:: edit self !}
<div class="row mb-3">
	<div class="col">
		<a href="{config:['service.auth.userSettingsUrl']}" target="_blank">{#icons/edit}{/icons/edit} Click here to manage your account</a>
	</div>
</div>
<dl class="row">
  {!<dt class="col-sm-3 col-md-2">Username:</dt>!}
  {!<dd class="col-sm-9 col-md-10 user-select-all">{userInfo.getUsername()}</dd>!}

  <dt class="col-sm-3 col-md-2">Name:</dt>
  <dd class="col-sm-9 col-md-10 user-select-all">{userInfo.getName()}</dd>

  <dt class="col-sm-3 col-md-2">Email:</dt>
  <dd class="col-sm-9 col-md-10 user-select-all">{userInfo.getEmail()}</dd>

  <dt class="col-sm-3 col-md-2">Roles:</dt>
  <dd class="col-sm-9 col-md-10">
        {#for curRole in userInfo.getRoles()}
            <span class="user-select-all badge bg-secondary">{curRole}</span>
        {/for}
  </dd>

  <dt class="col-sm-3 col-md-2">OQM Id:</dt>
  <dd class="col-sm-9 col-md-10 user-select-all"><span id="userOqmId">{userInfo.getId()}</span>{#copyTextButton /}</dd>

  {!{#if !user.getExternIds().isEmpty()}!}
  {!<dt class="col-sm-3 col-md-2">External Ids:</dt>!}
  {!<dd class="col-sm-9 col-md-10">!}
    {!<dl class="row">!}
        {!{#for externalIdEntry in user.getExternIds().entrySet()}!}
            {!<dt class="col-sm-4 user-select-all">{externalIdEntry.getKey()}</dt>!}
            {!<dd class="col-sm-8 user-select-all">{externalIdEntry.getValue()}</dd>!}
        {!{/for}!}
    {!</dl>!}
  {!</dd>!}
  {!{/if}!}

  {!{#if !userInfo.getAttributes().isEmpty()}!}
  {!<dt class="col-sm-3 col-md-2">Attributes:</dt>!}
  {!<dd class="col-sm-9 col-md-10">!}
    {!<dl class="row">!}
        {!{#for curAtt in userInfo.getAttributes().entrySet()}!}
            {!<dt class="col-sm-4 user-select-all">{curAtt.getKey()}</dt>!}
            {!<dd class="col-sm-8 user-select-all">{curAtt.getValue()}</dd>!}
        {!{/for}!}
    {!</dl>!}
  {!</dd>!}
  {!{/if}!}
</dl>
<div class="row">
    <div class="col">
        <div class="accordion" id="loginTokenAccord">
            <div class="accordion-item">
                <h2 class="accordion-header" id="loginTokenAccordHeading">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#loginTokenAccordCollapse" aria-expanded="false" aria-controls="loginTokenAccordCollapse">
                        Your Login Token
                    </button>
                </h2>
                <div id="loginTokenAccordCollapse" class="accordion-collapse collapse" aria-labelledby="loginTokenAccordHeading" data-bs-parent="#loginTokenAccord">
                    <div class="accordion-body">
                        <p>
                            This token is used to perform actions on the API. Use with caution.
                        </p>
                        {#copyTextButton copyTextContainerJqSelector="$('#userCurrentToken')" /}
                        <p>
                            <code id="userCurrentToken" class="user-select-all">{jwt}</code>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- TODO:: add checked out items -->
<!-- TODO:: add item history search -->
<!-- TODO:: add storage history search -->
<hr />
<div class="row">
    <div class="col">
        {!{#objView/history/objHistoryView containerId='userHistory' objectUrl='/api/v1/user/' objectId=userInfo.getId()}{/objView/history/objHistoryView} accordion=true!}
    </div>
</div>

{/pageContent}
{#pageScript}
    <script type="module">
		import { HistorySearchUtils } from '{rootPrefix}/res/js/HistorySearchUtils.js';
		import { TextCopyUtils } from '{rootPrefix}/res/js/TextCopyUtils.js';

		HistorySearchUtils.init();

		// $("#userHistoryForm").submit();
    </script>
{/pageScript}
{/include}