<div class="container-center-outer">
  <div class="container-center-middle">
    <div class="container-center-inner">
      <form id="useragent_credential">
        <div class="mx-auto" style="width: 72px;">
          <img class="mb-4" src="/wallet/img/bootstrap-solid.png" alt="" width="72" height="72">
        </div>
          <h1 class="h3 mb-3 font-weight-normal" style="text-align: center";">Please sign in</h1>

          <div class="mb-1 {{identifier_class}}">
            <label for="email">An identifier that you can remember</label>
            <input type="text" class="form-control" id="startup_identifier">
          </div>

          <div class="mb-2 {{pin_class}}" claims="pin">
            <label for="pin">Pin</label>
            <input type="password" class="form-control" onchange="pk.ptools.process_pin();" id="startup_pin">
          </div>

        <input type="button" id="submit_button" class="btn btn-lg btn-primary btn-block" value="Submit" onclick="pk.ptools.process_pin();" />
        
        <input type="hidden" id="encoded_sts_state_bundle" name="encoded_sts_state_bundle" value="{{{encoded_sts_state_bundle}}}" />
        <input type="hidden" id="content_module_state" name="content_module_state" value="{{{content_module_state}}}" />
        <p class="mt-5 mb-3 text-muted" style="text-align: center;">&copy; 2017-2018</p>
        <br/>
        <div id="error_div"></div>
      </form>
    </div>
  </div>
</div>