{% extends "base.html" %}
{% block title %}Your profile · {{ portal_name }}{% endblock %}
{% block content %}

<div class="page-head">
  <h1>Your profile</h1>
  <p class="page-sub">How your name appears, and where we reach you.</p>
</div>

<div class="account-layout">
  <form method="post" class="card-form">
    {% csrf_token %}
    {% if form.non_field_errors %}
      <p class="form-error">{{ form.non_field_errors|join:" " }}</p>
    {% endif %}
    <div class="batch-grid">
      <div class="field">
        <label for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}</label>
        {{ form.first_name }}
        {% if form.first_name.errors %}<p class="form-error">{{ form.first_name.errors|join:" " }}</p>{% endif %}
      </div>
      <div class="field">
        <label for="{{ form.last_name.id_for_label }}">{{ form.last_name.label }}</label>
        {{ form.last_name }}
        {% if form.last_name.errors %}<p class="form-error">{{ form.last_name.errors|join:" " }}</p>{% endif %}
      </div>
      <div class="field span-2">
        <label for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
        {{ form.email }}
        <p class="field-note">{{ form.email.help_text }}</p>
        {% if form.email.errors %}<p class="form-error">{{ form.email.errors|join:" " }}</p>{% endif %}
      </div>
    </div>
    <div class="form-foot">
      <button type="submit" class="btn">Save changes</button>
    </div>
  </form>

  <aside class="account-side">
    <h2 class="side-title">Signing in</h2>
    <dl class="side-list">
      <dt>Username</dt><dd>{{ user.username }}</dd>
      <dt>Password</dt><dd><a href="{% url 'password_change' %}">Change your password</a></dd>
      {% if user.last_login %}<dt>Last signed in</dt><dd>{{ user.last_login|date:"j M Y, g:i a" }}</dd>{% endif %}
    </dl>
    <p class="muted small">You can sign in with either your username or your
    email address — whichever is easier to remember.</p>
  </aside>
</div>
{% endblock %}