{{ extends "_layouts/empty" }}
{{ block body() }}
<section class="hero is-fullheight is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title has-text-centered">Initialize Administrator Account</h1>
      <div class="columns">
        <div class="column is-6 is-offset-3">          
          <form method="post" data-form="ajax-json" data-url="login">
            <div class="box">
              <div class="field">
                <label class="label">Login name</label>
                <div class="field has-addons is-marginless">
                  <div class="control">
                    <a class="button is-static">
                      <span class="icon is-small is-left">
                        <i class="fas fa-user"></i>
                      </span>
                    </a>
                  </div>                
                  <p class="control is-expanded">
                    <input name="login_name" class="input" type="text" placeholder="Login name" data-v-rule="native" required>
                  </p>
                </div>
              </div>
              <div class="field">
                <label class="label">Password</label>
                <div class="field has-addons is-marginless">
                  <div class="control">
                    <a class="button is-static">
                      <span class="icon is-small is-left">
                        <i class="fas fa-lock"></i>
                      </span>
                    </a>
                  </div>
                  <div class="control is-expanded">
                    <input id="txt-pwd" name="password" class="input" type="password" placeholder="Password" data-v-rule="native" required>
                  </div>
                  <div class="control is-expanded">
                    <input class="input" type="password" placeholder="Password confirmation" data-v-rule="native;match" data-v-arg-match="txt-pwd" required>
                  </div>
                </div>
              </div>
              <div class="field">
                <label class="label">Name</label>
                <div class="field has-addons is-marginless">
                  <div class="control">
                    <a class="button is-static">
                      <span class="icon is-small is-left">
                        <i class="fas fa-user"></i>
                      </span>
                    </a>
                  </div>                
                  <p class="control is-expanded">
                    <input name="name" class="input" type="text" placeholder="name" data-v-rule="native" required>
                  </p>
                </div>
              </div>
              <div class="field">
                <label class="label">Email</label>
                <div class="field has-addons is-marginless">
                  <div class="control">
                    <a class="button is-static">
                      <span class="icon is-small is-left">
                        <i class="fas fa-envelope"></i>
                      </span>
                    </a>
                  </div>                
                  <p class="control is-expanded">
                    <input name="email" class="input" type="text" placeholder="Email" data-v-rule="native;email" required>
                  </p>
                </div>
              </div>
              <hr>
              <div class="field">
                <p class="control">
                  <button class="button is-primary" type="submit">Create</button>
                </p>
              </div>
            </div>          
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}