{{ extends "../_layouts/default" }}
{{ block body() }}
<section class="hero is-primary">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title is-2 is-uppercase">{{ i18n("profile.title") }}</h1>
      <h2 class="subtitle is-5">{{ i18n("profile.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
    <div class="container">
      <nav class="tabs is-boxed">
        <ul>
          <li>
            <a href="/profile/">{{ i18n("menu.profile") }}</a>
          </li>
          <li class="is-active">
            <a href="/profile/password">{{ i18n("menu.password") }}</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>  
</section>

<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-6 is-offset-3">          
        <form method="post" data-form="ajax-form" data-message="The password has been successfully modified">
          <div class="box">
            <div class="field">
              <label class="label">{{ i18n("profile.field.password.current") }}</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="fa fa-lock"></i>
                    </span>
                  </a>
                </div>                
                <p class="control is-expanded">
                  <input name="password_old" class="input" type="password" placeholder="{{ i18n("profile.field.password.current") }}" data-v-rule="native" required>
                </p>
              </div>
            </div>         
            <div class="field">
              <label class="label">{{ i18n("profile.field.password.new") }}</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="fa fa-lock"></i>
                    </span>
                  </a>
                </div>
                <div class="control is-expanded">
                  <input id="txt-pwd" name="password" class="input" type="password" placeholder="{{ i18n("profile.field.password.new") }}" data-v-rule="native" required>
                </div>
                <div class="control is-expanded">
                  <input class="input" type="password" placeholder="{{ i18n("profile.field.password.confirm") }}" data-v-rule="native;match" data-v-arg-match="txt-pwd" required>
                </div>
              </div>
            </div>
            <hr>
            <div class="field">
              <p class="control">
                <button class="button is-primary" type="submit">{{ i18n("button.update") }}</button>
              </p>
            </div>
          </div>          
        </form>
      </div>
    </div>
  </div>
</section>
{{ end }}