{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Profile" %}{% endblock %}
{% block content %}
<h1>{% trans "Profile" %}</h1>
<p class="lead">{% trans "These details are stored in your account. Changes apply to every service that uses it." %}</p>
{% if notice == "saved" %}
<div class="notice success" role="status">
  <p>{% trans "Your changes were saved." %}</p>
</div>
{% elif notice == "unchanged" %}
<div class="notice" role="status">
  <p>{% trans "Nothing to change." %}</p>
</div>
{% endif %}
{% if form.errors %}
<div class="error-summary" role="alert" tabindex="-1" data-focus-on-load>
  <p><strong>{% trans "Your changes were not saved." %}</strong></p>
  <ul>
    {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
    {% for field in form %}{% for error in field.errors %}
    <li><a href="#{{ field.id_for_label }}">{{ error }}</a></li>
    {% endfor %}{% endfor %}
  </ul>
</div>
{% endif %}
{% if details %}
<dl class="card details">
  <dt>{% trans "User name" %}</dt>
  <dd>{{ details.username }}</dd>
  <dt>{% trans "E-mail address" %}</dt>
  <dd>{% if details.mail %}{{ details.mail }}{% else %}&ndash;{% endif %} <a href="{% url 'email' %}">{% trans "Change e-mail address" %}</a></dd>
</dl>
{% endif %}
<form method="post" action="{% url 'profile' %}" class="card" data-busy-on-submit novalidate>
  {% csrf_token %}
  {% trans "For example +49 171 123456. A number that starts with 0 is read as German." as phone_hint %}
  {% for item in fields %}
    {% if item.field.name == "first_name" %}
      {% include "profile/_text_field.html" with field=item.field label=item.label max_length=item.max_length autocomplete="given-name" required=True %}
    {% elif item.field.name == "last_name" %}
      {% include "profile/_text_field.html" with field=item.field label=item.label max_length=item.max_length autocomplete="family-name" required=True %}
    {% elif item.field.name == "display_name" %}
      {% include "profile/_text_field.html" with field=item.field label=item.label max_length=item.max_length autocomplete="name" required=True %}
    {% else %}
      {% include "profile/_text_field.html" with field=item.field label=item.label max_length=item.max_length autocomplete="tel" input_type="tel" hint=phone_hint %}
    {% endif %}
  {% endfor %}
  <p class="actions">
    <button type="submit" class="primary"><span class="spinner" aria-hidden="true"></span>{% trans "Save changes" %}</button>
    <a class="button" href="{% url 'home' %}">{% trans "Cancel" %}</a>
  </p>
</form>
{% endblock %}