{#
  Copyright (C) 2020-2026 Graz University of Technology.

  invenio-override is free software; you can redistribute it and/or
  modify it under the terms of the MIT License; see LICENSE file for more
  details.

  Overrides: invenio_theme/page_settings.html
  Changes:
    - Added title and a description banner at the top of the settings page.
#}
{%- extends config.THEME_BASE_TEMPLATE %}
{%- set title = _("Settings") %}
{%- block page_body scoped %}
  <div class="ui container fluid page-subheader-outer compact ml-0-mobile mr-0-mobile">
    <div class="ui container page-subheader">
      <h1 class="ui large header">{{ _("My account") }}</h1>
      <p class="page-inner-banner-description">{{ _("Manage your profile, preferences and account settings.") }}</p>
    </div>
  </div>
  <div class="ui grid container stackable">
    <nav class="five wide tablet four wide computer column"
         aria-label="{{ _('Account settings') }}">
      {%- block settings_menu scoped %}
        <div class="ui vertical menu fluid">
          <strong class="header item">{{ _("Settings") }}</strong>
          {%- for item in current_menu.submenu('settings').children if item.visible %}
            {%- block settings_menu_item scoped %}
              <a href="{{ item.url }}"
                 class="brand item {% if item.active %}active{% endif %}"
                 {% if item.active %}aria-current="page"{% endif %}>{{ item.text|safe }}</a>
            {%- endblock %}
          {%- endfor %}
        </div>
      {%- endblock %}
    </nav>
    <article class="eleven wide tablet twelve wide computer column">
      {%- block settings_content scoped %}
        <section aria-label="{{ _(panel_title|default('') ) }}" class="ui segments">
          <div class="ui segment secondary">
            {%- block settings_content_title scoped %}
              {%- if panel_icon %}
                {%- block settings_content_title_icon scoped %}<i class="{{ panel_icon }}" aria-hidden="true"></i>{%- endblock %}
              {%- endif %}
              <h2 class="ui tiny header inline-block m-0">{{ panel_title|default("") }}</h2>
            {%- endblock %}
          </div>
          {%- block settings_body scoped %}
            <div class="ui segment">
              {%- block settings_form scoped %}
              {%- endblock settings_form %}
            </div>
          {%- endblock settings_body %}
        </section>
      {%- endblock %}
    </article>
  </div>
{%- endblock %}