{# account/index.html — the signed-in user's own account (milestone 490): who
   they are, and the time zone every page writes its times in. #}
{% extends "base.html" %}
{% from "_macros.html" import page_header %}
{% block title %}Your account — Steward{% endblock %}
{% block content %}
{{ page_header("Your account") }}

<p class="page-verdict">
  Signed in as <strong>{{ user.username }}</strong> ({{ user.role.value }}) with {{ source }}
  · times show in <strong>{{ zone_name }}</strong> ({{ zone_label }})
</p>

<form method="post" action="/account/" class="form-page">{{ csrf_field() }}
  <section class="card form-section" aria-labelledby="acct-time">
    <h2 id="acct-time" class="section-title">Time zone</h2>
    {% if error %}<p class="field-error" role="alert">{{ error }}</p>{% endif %}
    <div class="field">
      <label class="field-label" for="acct-tz">Show times in</label>
      <select class="input" id="acct-tz" name="time_zone">
        {% for region, names in zones %}
        {% if region %}<optgroup label="{{ region }}">{% endif %}
        {% for z in names %}<option value="{{ z }}"{% if z == zone_name %} selected{% endif %}>{{ z.split('/', 1)[1]|replace('_', ' ') if region else z }}</option>{% endfor %}
        {% if region %}</optgroup>{% endif %}
        {% endfor %}
      </select>
      <span class="field-hint">Every page writes its times in this zone, on a 24-hour clock.</span>
    </div>
  </section>
  <button type="submit" class="btn">Save</button>
</form>
{% endblock %}