{% import "components.html" as c with context %}
<div class="module" data-view="{{ view }}">
<div class="col list" data-pane="settings">
  {{ c.column_header(t.text("settings.title"), brand=true) }}
  <div class="list-items">
    {% set icons = {"appearance": "sun-moon", "security": "key-round", "roles": "users", "accounts": "users", "oidc": "key-round"} %}
    {% for key in sections %}{% set icon_name = icons[key] %}
    {% call c.list_item(t.text("settings." ~ key), t.text("settings." ~ key ~ ".hint"), href="/settings/" ~ key, on=(section == key), extra_class="plain") %}
      {{ c.icon(icon_name) }}
    {% endcall %}
    {% endfor %}
  </div>
  <button class="btn mobile-logout" type="button" hx-post="/logout">{{ c.icon("log-out") }}{{ t.text("settings.logout") }}</button>
</div>
{% if section in ("roles", "accounts", "oidc") %}
{% include "settings_" ~ section ~ ".html" %}
{% else %}
<div class="col wide" data-pane="section">
  {{ c.column_header(t.text("settings." ~ section), back="/settings") }}
  <div class="body">
    {% include "settings_" ~ section ~ ".html" %}
  </div>
</div>
{% endif %}
</div>