{% extends 'layout.html' %}
{% set breadcrumbs = breadcrumb_page('prefs') +  breadcrumb_page(self) %}
{% block content %}
  <form method="post" action="#">
    {# Header #}
    <div class="sticky-top mb-2 bg-white border-bottom p-3">
      <div class="d-flex flex-wrap justify-content-between rdw-container">
        <h2 class="mb-0">{{ active_page.label }}</h2>
        <div>
          <button type="button"
                  class="btn btn-secondary"
                  onclick="window.history.back();">{% trans %}Cancel{% endtrans %}</button>
          <button type="submit" class="btn btn-primary">{% trans %}Save changes{% endtrans %}</button>
        </div>
      </div>
    </div>
    <div class="rdw-container">
      <p class="text-secondary small mb-4">
        {% trans %}Manage your personal information, notification preferences and account security.{% endtrans %}
      </p>
      {# General info #}
      <div class="card mb-3">
        <div class="card-header d-flex align-items-center gap-2">
          <RdwIcon value="bi-person-vcard text-primary" class="me-1" />
          {%- trans %}General Information{% endtrans %}
        </div>
        <div class="card-body">
          <cf:Field field={{ form.username }} />
          <cf:Field field={{ form.fullname }} />
          <cf:Field field={{ form.email }} />
          <div class="row">
            <cf:Field field={{ form.lang }} container-class="col-sm-6" />
            <cf:Field field={{ form.timezone }} container-class="col-sm-6" />
          </div>
        </div>
      </div>
      {# Password #}
      <div class="card mb-3">
        <div class="card-header d-flex align-items-center gap-2">
          <RdwIcon value="bi-shield-lock text-primary" class="me-1" />
          {%- trans %}Password{% endtrans %}
        </div>
        <div class="card-body d-flex align-items-center justify-content-between gap-3 flex-wrap">
          <div>
            <p class="mb-1 small fw-medium">{% trans %}Change your password{% endtrans %}</p>
            <p class="mb-0 text-muted small">
              {% trans %}You will need your current password to set a new one. Choose a strong password you don't use elsewhere.{% endtrans %}
            </p>
          </div>
          <button class="btn btn-outline-secondary flex-shrink-0"
                  type="button"
                  data-bs-toggle="modal"
                  data-bs-target="#rdw-password-modal">
            <RdwIcon value="bi-key" class="me-1" />
            {%- trans %}Change password{% endtrans %}
          </button>
        </div>
      </div>
    </div>
  </form>
  {# Change password Modal #}
  <form action="#" method="post">
    <ModalDialog id="rdw-password-modal"
                 :title="_('Change Password')"
                 :submit="_('Update password')"
                 :show="password_form.error_message">
      {% if password_form.error_message %}<p class="text-danger">{{ password_form.error_message }}</p>{% endif %}
      <cf:Fields form={{ password_form }} />
    </ModalDialog>
  </form>
{% endblock %}