{% extends "base.html" %} {# Your project should provide a base.html #}
{% load i18n gdaps conjunto %}

{% block page %}
  <div class="page-wrapper">
    <div class="page-header d-print-none">
      <div class="container-xl">
        <div class="row g-2 align-items-center">
          <div class="col">
            <h2 class="page-title">
              {% translate 'Settings' %}
            </h2>
          </div>
        </div>
      </div>
    </div>
    <div class="page-body">
      <div class="container-xl">
        <div class="card" >
          <div class="row g-0">
            <div class="col-12 col-md-3 border-end">
              <div class="card-body">

                {% for element in elements.ISettingsSection %}
                  {% if element.enabled %}

                    {% ifchanged element.group %}
                      {% if not forloop.first %}
                        </div>  <!-- Close the div tag if it's not the first iteration -->
                      {% endif %}
                      <h4 class="subheader">{{ element.group }}</h4>
                      <div id="settings-menu" class="list-group list-group-transparent">
                    {% endifchanged %}
                    <button
                        class="list-group-item list-group-item-action d-flex align-items-center{% if element.name == active_element %} active{% endif %}"
                        id="settings-menu-button-{{ element.name }}"
                        hx-get="{% url element.get_url_name pk=user.id %}"
                        hx-trigger="{% if element.name == active_component %}load, {% endif %}click"
                        hx-push-url="?{{ view.query_variable }}={{ element.name }}"
                        hx-target="#settings-content"
                        onclick="updateActive(this);"
                    >
                      <i class="bi bi-{{ element.icon }} me-2"></i>
                      {{ element.title }}
                    </button>

                  {% endif %}
                {% endfor %}
                </div>

            </div>
          </div>

          <div id="settings-content" class="col-12 col-md-9 d-flex flex-column">
            {% for element in elements.ISettingsSection %}
              {% if element.name == active_element %}
                {% render_element element %}
              {% endif %}
            {% endfor %}
          </div>

        </div>
      </div>
    </div>
  </div>

  <script>
      function updateActive(selected) {
          htmx.findAll("#settings-menu>.list-group-item").forEach((elt)=>{
              htmx.removeClass(elt, "active");
          }, "active");
          htmx.addClass(selected, "active");
      }
  </script>
{% endblock %}