{% extends '../layout/2column.html' %}

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

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

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

  <ul class="nav nav-tabs">
    <li><a href="/me"><i class="fa fa-gears"></i> {{ t('User Information') }}</a></li>
    <li class="active"><a href="/me/external-accounts"><i class="fa fa-user-plus"></i> {{ t('External Accounts') }}</a></li>
    <li><a href="/me/password"><i class="fa fa-key"></i> {{ t('Password Settings') }}</a></li>
    <li><a href="/me/apiToken"><i class="fa fa-rocket"></i> {{ t('API Settings') }}</a></li>
  </ul>

  <div class="tab-content">

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

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

  <legend>{{ t('External Accounts') }}</legend>

  <table class="table table-hover table-striped table-bordered table-user-list">
    <thead>
      <tr>
        <th width="120px">Authentication Provider</th>
        <th><code>accountId</code></th>
        <th width="200px">{{ t('Created') }}</th>
        <th width="150px">{{ t('Admin') }}</th>
      </tr>
    </thead>
    <tbody>
      {% for account in externalAccounts %}
      <tr>
        <td>{{ account.providerType }}</td>
        <td>
          <strong>{{ account.accountId }}</strong>
        </td>
        <td>{{ account.createdAt|date('Y-m-d', account.createdAt.getTimezoneOffset()) }}</td>
        <td>
          <div class="btn-group">

            <form action="/me/external-accounts/disassociate" method="post">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <button type="submit" class="btn btn-sm btn-danger">
                <i class="fa fa-unlink"></i>
                {{ t('Diassociate') }}
              </button>
            </form>

          </div>{# end of .btn-group #}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <div id="form-box">

    <form action="/me/password" method="post" class="form-horizontal" role="form">
    <fieldset>
      <legend>{{ t('External Accounts') }}</legend>
      <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="col-xs-offset-2 col-xs-10">
          <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 footer %}
{% endblock %}