{% extends "base.html" %}
{% from "components/icons.html" import back_icon, settings_icon, user_icon, team_icon, audit_icon, appearance_icon %}

{% block title %}{{ settings_title }}{% endblock %}

{% block layout %}
  <div class="app-shell settings-shell" data-responsive-shell>
    <header class="settings-topbar settings-header">
      {{ navigation_button('settings-sidebar', expand=true) }}
      <p class="settings-title">{{ settings_icon() }}Settings</p>
    </header>
    <aside class="settings-sidebar" data-navigation id="settings-sidebar">
      <div class="navigation-heading">
        <a class="settings-back" href="{{ url_for('index') }}">{{ back_icon() }}Back to app</a>
        {{ navigation_button('settings-sidebar') }}
      </div>
      <nav id="settings-navigation" class="primary-navigation" aria-label="Settings navigation">
        <p class="nav-label">Personal</p>
        <a class="nav-item{{ ' is-active' if active_navigation == 'appearance' else '' }}" href="{{ url_for('appearance_settings') }}"{% if active_navigation == 'appearance' %} aria-current="page"{% endif %}>{{ appearance_icon() }}Appearance</a>
        <p class="nav-label">Access management</p>
        {% if current_actor.role == "admin" %}<a class="nav-item{{ ' is-active' if active_navigation == 'dataset_access' else '' }}" href="{{ url_for('dataset_access_settings') }}"{% if active_navigation == 'dataset_access' %} aria-current="page"{% endif %}>{{ settings_icon() }}Dataset access</a>{% endif %}
        {% if current_actor.role == "admin" %}<a class="nav-item{{ ' is-active' if active_navigation == 'users' else '' }}" href="{{ url_for('user_list') }}"{% if active_navigation == 'users' %} aria-current="page"{% endif %}>{{ user_icon() }}Users</a>{% endif %}
        <a class="nav-item{{ ' is-active' if active_navigation == 'teams' else '' }}" href="{{ url_for('team_list') }}"{% if active_navigation == 'teams' %} aria-current="page"{% endif %}>{{ team_icon() }}Teams</a>
        <a class="nav-item{{ ' is-active' if active_navigation == 'api_keys' else '' }}" href="{{ url_for('api_key_list') }}" data-no-view-transition{% if active_navigation == 'api_keys' %} aria-current="page"{% endif %}>{{ settings_icon() }}API keys</a>
        {% if current_actor and current_actor.role == 'admin' %}
          <p class="nav-label">Activity</p>
          <a class="nav-item{{ ' is-active' if active_navigation == 'audit' else '' }}" href="{{ url_for('audit_list') }}"{% if active_navigation == 'audit' %} aria-current="page"{% endif %}>{{ audit_icon() }}Audit log</a>
        {% endif %}
      </nav>
    </aside>
    <main id="content" class="app-main settings-content" tabindex="-1">
      {% include "components/flash_messages.html" %}
      <header class="page-header management-list-header">
        <div class="page-context"><h1 class="page-title">{{ settings_title }}</h1>{% block settings_meta %}{% endblock %}</div>
        <div class="page-actions">{% block settings_actions %}{% endblock %}</div>
      </header>
      {% block settings_content %}{% endblock %}
    </main>
    {{ navigation_drawer() }}
  </div>
{% endblock %}