{% extends '../layout-growi/base/layout.html' %}

{% block html_title %}{{ customTitle(t('Password Settings')) }}{% endblock %}

{% block content_header %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">{{ t('Password Settings') }}</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main">

  <ul class="nav nav-tabs">
    <li><a href="/me"><i class="icon-user"></i> {{ t('User Information') }}</a></li>
    {% if isEnabledPassport() %}
    <li><a href="/me/external-accounts"><i class="icon-share-alt"></i> {{ t('External Accounts') }}</a></li>
    {% endif %}
    <li class="active"><a href="/me/password"><i class="icon-lock"></i> {{ t('Password Settings') }}</a></li>
    <li><a href="/me/apiToken"><i class="icon-paper-plane"></i> {{ t('API Settings') }}</a></li>
  </ul>

  <div class="tab-content">

  {% if not user.password %}
  <div class="alert alert-warning m-t-10">
    {{ t('Password is not set') }}
  </div>
  {% endif %}

  {% set message = req.flash('successMessage') %}
  {% if message.length %}
  <div class="alert alert-success m-t-10">
    {{ message }}
  </div>
  {% endif %}

  {% if req.form.errors.length > 0 %}
  <div class="alert alert-danger m-t-10">
    <ul>
    {% for error in req.form.errors %}
      <li>{{ error }}</li>
    {% endfor %}
    </ul>
  </div>
  {% endif %}

  <div id="form-box" class="m-t-20">

    <form action="/me/password" method="post" class="form-horizontal" role="form">
    <fieldset>
      {% if user.password %}
      <legend>{{ t('Update Password') }}</legend>
      {% else %}
      <legend>{{ t('Set new Password') }}</legend>
      {% endif %}
      {% if user.password %}
      <div class="form-group">
        <label for="mePassword[oldPassword]" class="col-xs-3 control-label">{{ t('Current password') }}</label>
        <div class="col-xs-6">
          <input class="form-control" type="password" name="mePassword[oldPassword]">
        </div>
      </div>
      {% endif %}
      <div class="form-group {% if not user.password %}has-error{% endif %}">
        <label for="mePassword[newPassword]" class="col-xs-3 control-label">{{ t('New password') }}</label>
        <div class="col-xs-6">
          <input class="form-control" type="password" name="mePassword[newPassword]" required>
        </div>
      </div>
      <div class="form-group">
        <label for="mePassword[newPasswordConfirm]" class="col-xs-3 control-label">{{ t('Re-enter new password') }}</label>
        <div class="col-xs-6">
          <input class="form-control col-xs-4" type="password" name="mePassword[newPasswordConfirm]" required>

          <p class="help-block">{{ t('page_register.form_help.password') }}</p>
        </div>
      </div>


      <div class="form-group">
        <div class="text-center">
          <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
        </div>
      </div>

    </fieldset>
    </form>
  </div>


  </div>
</div>
{% endblock content_main %}

{% block content_footer %}
{% endblock %}

{% block layout_footer %}
{% endblock %}