{% extends 'layout.html' %}
{% set breadcrumbs = breadcrumb_page('prefs') +  breadcrumb_page(self) %}
{% block content %}
  <div class="col-xxl-6 offset-xxl-3 col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
    <form method="post" action="#">
      {# Header #}
      <div class="d-flex flex-wrap justify-content-between mb-2 sticky-top py-2 bg-white border-bottom"
           style="top: 56px">
        <h2>{% trans %}Account settings{% endtrans %}</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>
      <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" />
          {% 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" />
          {% 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" />
            {% trans %}Change password{% endtrans %}
          </button>
        </div>
      </div>
      {# Report #}
      <div class="card mb-3">
        <div class="card-header d-flex align-items-center gap-2">
          <RdwIcon value="bi-envelope-paper text-primary" />
          {% trans %}Backup Report{% endtrans %}
        </div>
        <div class="card-body">
          <p class="mb-0 text-muted small">
            {% trans %}Choose how often you want to receive a backup status report by email.{% endtrans %}
          </p>
          <cf:Field field={{ form.report_time_range }} />
          <cf:Field field={{ form.send_report }} class="btn-secondary" />
        </div>
      </div>
    </form>
  </div>
  {# 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 %}