<p data-wco="createid" class="text-center text-neutral-content">
  {{{signuptitle}}}
</p>
<div class="paramid">
    <div class="mt-2">
      <label class="input validator mbt-1">
        <svg class="h-[1em] opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="1"
            fill="black"
            stroke="black"
          >
            <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"></path>
          </g>
        </svg>
        <input
          class="signupalias"
          type="input"
          required
          placeholder="alias"
          pattern="[a-z0-9\-]*"
          minlength="3"
          maxlength="30"
          title="{{{aliastitle}}}"
        />
      </label>  
      <div class="validator-hint hidden">
        <p>{{{aliasinvalid}}}</p>
      </div>
    </div>
    <div class="mt-2">
      <label class="input validator mt-1">
        <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="1"
            fill="black"
            stroke="black"
          >
            <rect width="20" height="16" x="2" y="4" rx="2"></rect>
            <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
          </g>
        </svg>
      <input class="signupemailrecovery" type="email" placeholder="mail@site.com" required />
      </label>
      <div class="validator-hint hidden">
          {{{emailinvalid}}}
      </div>
    </div>
    <div class="mt-2">  
      <label class="input mt-1">
        <svg class="h-[1em] opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <g
            stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="1"
          fill="black"
          stroke="black"
          >
          <path  d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"></path>
          </g>
        </svg>
        <input type="text" class="signuppassphrase" placeholder="passphrase (option)" />
      </label>
    </div>
    <div class="mt-5">
      <button
        class="btncreatekey btn btn-primary w-full justify-center hover:bg-secondary focus:outline focus:outline-primary"
        onclick="const authid=document.getElementById('{{id}}');console.log('{{id}}'); apx.apxauth.createIdentity(
        '{{id}}',
        authid.querySelector('.signupalias').value,
        authid.querySelector('.signupemailrecovery').value,
        authid.querySelector('.signuppassphrase').value
        )"
      >
        {{{createkey}}}
      </button>
    </div>
</div>
<div class="getmykeys hidden mt-1">
  <div class="flex m-6">
    <div class="w-14 flex-none">
          <input type="checkbox" checked="checked" class="signuptrustedcheck checkbox checkbox-secondary" />
    </div>
    <div class="flex-1">
      <p class="text-sm text-justify" >{{{trusttext}}}</p>
    </div>
  </div>
  <div class="downloadkeys text-center mt-1">
    <button
      class="signuppublickey btn btn-outline btn-accent text-white shadow-sm"
    >
     {{{downloadPuK}}}
    </button>
    <button
      class="signupprivatekey btn btn-outline btn-accent text-white shadow-sm"
    >
     {{{downloadPrK}}}
    </button>
  </div>
  <div class="mt-2">
    <button
      class="btncreateidentity btn btn-primary w-full justify-center hover:bg-secondary focus:outline focus:outline-primary"
      onclick="const authid=document.getElementById('{{id}}');apx.apxauth.registerIdentity(
      '{{id}}',
       authid.querySelector('.signuptrustedcheck').checked
      )"
    >{{{saveidentity}}}
    </button>
    <button
      class="signupbtnreload hidden btn btn-primary w-full justify-center hover:bg-secondary focus:outline focus:outline-primary"
      onclick="location.reload(true)"
    >
     {{{nextpage}}}
    </button>
  </div>
</div>  

