{% extends "base.html" %}
{% set active_page = "account" %}

{% block title %}{% trans "page title" %}Account settings{% endtrans %} | Taguette{% endblock %}

{% block contents %}
<h1>{% trans "title" %}Account settings{% endtrans %}</h1>
{% if error %}
<div class="alert alert-danger">{{ error }}</div>
{% endif %}
<form action="{{ reverse_url('account') }}" method="post">
  {{ xsrf_form_html() }}
  <div class="form-group row">
    <label for="login" class="col-sm-2 col-form-label">{% trans "form label for user name" %}Login{% endtrans %}</label>
    <div class="col-sm-10">
      <input type="text" id="login" class="form-control" value="{{ user.login }}" disabled />
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">{% trans "form label for email address" %}Email{% endtrans %}</label>
    <div class="col-sm-10">
      <input type="text" name="email" id="email" class="form-control" value="{{ user.email or '' }}" />
      <small>{% trans %}Optional. <em>We will not share your email with anyone. This is only used in case you forget your password.</em>{% endtrans %}</small>
    </div>
  </div>
  <div class="form-group row">
    <label for="language" class="col-sm-2 col-form-label">{% trans "form label for language selection" %}Language{% endtrans %}</label>
    <div class="col-sm-10">
      <select id="language" name="language" class="form-control">
        <option value="auto"{% if current_language == None %} selected{% endif %}>{% trans "language selection option" %}Auto-detect{% endtrans %}</option>
        {% for lang_code, lang_name in languages %}
        <option value="{{ lang_code }}"{% if lang_code == current_language %} selected{% endif %}>{{ lang_name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="form-group row">
    <label for="password1" class="col-sm-2 col-form-label">{% trans %}New password{% endtrans %}</label>
    <div class="col-sm-10">
      <input type="password" name="password1" id="password1" class="form-control" />
    </div>
  </div>
  <div class="form-group row">
    <label for="password2" class="col-sm-2 col-form-label">{% trans %}Repeat new password{% endtrans %}</label>
    <div class="col-sm-10">
      <input type="password" name="password2" id="password2" class="form-control" />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">{% trans "form submit button" %}Update{% endtrans %}</button>
    </div>
  </div>
</form>
{% endblock %}