{% extends 'base.html' %}
{% from 'bootstrap5/form.html' import render_form %}
{% from 'bootstrap5/nav.html' import render_nav_item %}

{% block content %}
<div class="page-header">
  <h1>Settings</h1>
</div>
<div class="row">
  <div class="col-md-3">
    <div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
      {{ render_nav_item('user.edit_profile', 'Edit Profile') }}
      {{ render_nav_item('user.change_avatar', 'Change Avatar') }}
      {{ render_nav_item('user.change_password', 'Change Password') }}
      {{ render_nav_item('user.change_email_request', 'Change Email') }}
      {{ render_nav_item('user.notification_setting', 'Notification') }}
      {{ render_nav_item('user.privacy_setting', 'Privacy') }}
      {{ render_nav_item('user.delete_account', 'Delete Account') }}
    </div>
  </div>
  <div class="col-md-9">
    {% block setting_content %}{% endblock %}
  </div>
</div>
{% endblock %}