<div class="row">
  <div class="col-sm-6" data-spacename="explain">
    <h2>How it works</h2>
    <p class="small">
      Mandatory: any apixtrib request <b>header</b> have to set with:<br>
      {xalias,xhash,xdays,xtribe,xlang,xapp}<br>

      This webapp use :
    </p>
    <ul>
      <li class="small">apxtribcli.js: that manage a localstorage item call xapp (this example: adminapx) to save and
        update data from
        api to local
        webapp: status; template,...)</li>
      <li class="small">apxapp.js: viewer to manipulate DOM and bootstrapV5 framework to collect data</li>
      <li class="small">apxpagans.js: controler that manage get, create, update, delete pagans</li>
    </ul>
    <p class="small">
      <b>In few words:</b><br>
      A Pagan is <b> identify by an Alias (for human)</b> known by api as a <b>publicKey</b> (for machine).<br>
      The owner of this Alias (stored in header xalias) have a privateKey generate when a Pagan is created.
      This private key is used to sign (with openpgp.js detachedsignature) the message "xalias_xdays" where xdays is a
      timestamp this <b>signature is store into xhash</b> (header)
      It is possible to trust a tribe to store this privateKey (and passphrase that encrypt this privatekey, that can be
      empty, if not the passphrase is needed to uncipher the stored privateKey).<br>
      <b>api accept only xhash with a timestamp less than 24hours</b>. Means app needs to store privatekey.
    </p>
    <p class="small">When authenticated, a Pagan can be identify as a Person into a tribe (xtribe) and then has an
      object
      instance of Person named "alias" into the tribe space (means /nationchains/tribe/xtribe/Person/alias.json).<br>
      In this file we get a key call accessright based onto the schema accessright to the ressource of the xtribe
      only.
    </p>
    <p class="small">
      <b>accessright is based on a CRUDOwner rules per object</b>. Owner of an instance can do any things on his data
      (until it respects schema). An object can have multiple Owners.<br>
      Other user needs to have specifics right to act on object instance {objectname:'CRUD', ..}.<br>
      Person can have key "profil" user of an app to manage webapp but action has to be on line with accessright to
      work.
    </p>
    <button type="button" class="btn btn-outline-success btn-sm"
      onclick="app.runapirequest('modalinfo',{method:'GET',url:'nationchains/pagans/idx/alias_all.json'},{title:'Alias list',body:'',actions:[], classmodaldialog:'modal-xl'})">Show
      list of alias</button>
    </p>
    <code>
      GET nationchains/pagans/idx/alias_all.json  -> data:{alias:{alias:publicKey}}
    </code>
    <p>To allow trustable Tribe to store the Private and Passphrase Key, you get from the townId_all.json key:tribes
    </p>
    <button type="button" class="btn btn-outline-success btn-sm"
      onclick="app.runapirequest('modalinfo',{method:'GET',url:'nationchains/towns/idx/townId_all.json'},{title:'Tribes list',body:'',actions:[], classmodaldialog:'modal-xl'})">Show
      list of tribe</button>
    <code>
      GET /nationchains/towns/idx/townId_all.json  -> data:{townId:{tribes:[list of tribeId inside a town]}}
    </code>
    <h3> Am I authenticated to api</h3>
    <p></p>
    xhash is a detached signature done with public and private key of message: 'alias_xdays' where xdays is a time
    stamp
    a xhash has an elapse of 24hours after it has to be recreate.<br>
    create


  </div>
  <div class="col-sm-6" data-spacename="userinterface">
    <div class="row g-3">
      <h3>Am i authenticated to api?</h3>
      <button type="button" id="btntestauth" class="btn btn-outline-success btn-sm"
        onclick="app.runapirequest('modalinfo',{method:'GET',url:'api/pagans/isauth'},{title:'Am i authenticated',body:'',actions:[], classmodaldialog:'modal-xl'})">
        Test it</button>
      <code>
        GET 'api/pagans/isauth'  ->  status 200 : Well authenticated with alias, status 400: not authenticated
      </code>
      <hr>
      <h3>Logout</h3>
      <button type="button" class="btn btn-outline-success btn-sm" onclick="pagans.logout();">
        Remove headers</button>
      <hr>
      <h3>I prove that i own this alias</h3>
      <div class="col-md-6">
        <label for="inputaliasauth" class="form-label">Your alias</label>
        <input type="text" class="form-control" id="inputaliasauth" placeholder="A public alias that any one see">
      </div>
      <div class="col-12">
        <label for="inputpassphraseauth" class="form-label">A passphrase</label>
        <input type="text" class="form-control" id="inputpassphraseauth"
          placeholder="optional, a passphrase to remember, each time something try to use your privateKey this passphrase will be requested">
      </div>
      <textarea rows="5" id="privatekeyauth"></textarea>
      <button class="btn btn-primary"
        onclick="pagans.authentifyme(document.getElementById('inputaliasauth').value,document.getElementById('inputpassphraseauth').value,document.getElementById('privatekeyauth').value);alert('Click on Test it to check')">Sign
        my header</button>
      <hr>
      <h3>Create a decentralized Identity</h3>
      <p>apXtrib allow you to create keys to identify yourself with a universal alias</p>
      <div class="col-md-6">
        <label for="inputalias" class="form-label">Your alias</label>
        <input type="text" class="form-control" id="inputalias" placeholder="A public alias that any one see">
      </div>
      <div class="col-md-6">
        <label for="inputemailrecovery" class="form-label">Email Recovery</label>
        <input type="email" class="form-control" id="inputemailrecovery"
          placeholder="optional, if you want to receive by mail your keys">
      </div>
      <div class="col-12">
        <label for="inputpassphrase" class="form-label">A passphrase</label>
        <input type="text" class="form-control" id="inputpassphrase"
          placeholder="optional, a passphrase to remember, each time something try to use your privateKey this passphrase will be requested">
      </div>
      <button type="button" id="generatekeys"
        onclick="pagans.createIdentity(document.getElementById('inputalias').value,document.getElementById('inputpassphrase').value)"
        class="btn btn-primary">Generate keys</button>
      <div id="trustintribe" class="d-none">
        <div class="mb-3 row">
          <div class="col-12">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="trustedcheck"
                onclick="document.getElementById('selecttrusttribe').classList.toggle('d-none');">
              <label class="form-check-label small" for="trustedcheck">
                <b>I trust a tribe to keep my private key and email, doing this i automaticaly create a Person space in
                  tribe i trust. </b>
                I understand that someone with tribe accessrights(druid) from this tribe can read my personnal data by
                unciphering my
                data.<br>
                <b>If i don't trust</b> i understand that if i loose my privatekey i also loose my data.<br>
                If you set a correct email then you will receive your keys on your mailbox, this email is not store if
                you do not trust<br>
                If you use a browser that <b>can be accessible by someone else, don't forget to "logout"</b> to clean up
                any trace.<br>
                <b>In any case please download your keys and move it on a usb key or/and print it</b><br>
              </label>
            </div>
          </div>
          <div id="selecttrusttribe" class="d-none">
            <label for="selectnationid" class="col-12 col-form-label">If you want to trust in a Tribe to store your
              private key, please chose a tribe which you trust in</label>
            <div class="col-12">
              <select class="form-select" id="trustedtribe" aria-label="" placeholder="A tribe to store my private key">
                {{#tribes}}
                <option {{#selected}}selected{{/selected}} value="{{tribeId}}">{{tribeId}}</option>
                {{/tribes}}
              </select>
              <input class="d-none" id="inputtribeId" value="{{tribeId}}">
            </div>
          </div>
        </div>
      </div>
      <div id="downloadkeys" class="btn-group d-none">
        <p>Download your keys at least PrivateKey this have to save in a secret place</p>
        <button id="privatekey" key="" class="btn btn-outline-primary"
          onclick="app.downloadlink('tmp.privateKey',apx.data,apx.data.headers.xalias);">Download
          PrivateKey</button>
        <button id="publickey" key="" class="btn btn-outline-primary"
          onclick="app.downloadlink('tmp.publicKey',apx.data,apx.data.headers.xalias);">Download
          PublicKey</button>
      </div>
      <div id="createId" class="col-12 d-none">
        <button class="btn btn-primary" onclick="pagans.registerIdentity();">Create
          this identity</button>
      </div>
    </div>
  </div>