{% extends parent_template|default:"conjunto/app_base.html" %}
{% load i18n crispy_forms_tags %}
{% comment %}
  Settings page — Tabler-style sectioned card (rail + pane) embedded
  in the regular app shell.

  ``parent_template`` may be set by a downstream project (context
  processor) to point at the project's own app shell — e.g. medux sets
  it to ``core/base.html`` so the medux navigation rail renders in the
  global sidebar. Defaults to ``conjunto/app_base.html``.

  HTMX swap target: ``#cj-settings-card`` — re-rendered as the
  ``settings-card`` partial whenever the user clicks a rail entry, so
  the active class on the rail stays in sync with the visible pane.
{% endcomment %}

{% block title %}{% trans "Settings" %}{% endblock %}
{% block page_title %}{% trans "Settings" %}{% endblock %}


{% partialdef settings-rail %}
    {% for group, sections in groups %}
        <h4 class="subheader{% if not forloop.first %} mt-4{% endif %}">{{ group.title }}</h4>
        <div class="list-group list-group-transparent">
            {% for s in sections %}
                <a class="list-group-item list-group-item-action d-flex align-items-center ps-4{% if active_section and s.name == active_section.name %} active{% endif %}"
                   href="{% url 'settings:index' %}?section={{ s.name }}"
                   hx-get="{% url 'settings:index' %}?section={{ s.name }}"
                   hx-target="#cj-settings-card"
                   hx-swap="innerHTML"
                   hx-push-url="true">
                    {% if s.icon %}<i class="ti ti-{{ s.icon }} me-2"></i>{% endif %}
                    {{ s.title }}
                </a>
            {% endfor %}
        </div>
    {% endfor %}
{% endpartialdef %}


{% comment %}
  settings-form is rendered stand-alone on form_invalid, so it must
  not rely on forloop being present. The <hr> separator between
  consecutive subsections is emitted by settings-pane instead, before
  each non-first subsection.
{% endcomment %}
{% partialdef settings-form %}
    <section id="cj-settings-form-{{ plugin.name }}" class="cj-settings-form">
        <h3 class="card-title">{{ plugin.title }}</h3>
        {% if plugin.description %}
            <p class="card-subtitle">{{ plugin.description }}</p>
        {% endif %}
        <div class="ps-3">
            <form hx-post="{% url 'settings:form' plugin.name %}"
                  hx-target="#cj-settings-form-{{ plugin.name }}"
                  hx-swap="outerHTML">
                {% csrf_token %}
                {{ form|crispy }}
                <div class="mt-3">
                    <button type="submit" class="btn btn-sm btn-primary">
                        {% trans "Save" %}
                    </button>
                </div>
            </form>
        </div>
    </section>
{% endpartialdef %}


{% partialdef settings-pane %}
    {% if active_section %}
        <h2 class="mb-4">
            {% if active_section.icon %}<i class="ti ti-{{ active_section.icon }} me-2"></i>{% endif %}
            {{ active_section.title }}
        </h2>
        {% for plugin, form in forms %}
            {% if not forloop.first %}<hr class="my-4">{% endif %}
            {% if plugin.template %}
                {% include plugin.template %}
            {% else %}
                {% partial settings-form %}
            {% endif %}
        {% empty %}
            <p class="text-secondary">{% trans "No settings available in this section." %}</p>
        {% endfor %}
    {% else %}
        <p class="text-secondary">{% trans "No settings available." %}</p>
    {% endif %}
{% endpartialdef %}


{% comment %}
  settings-card — the swap target. Click on a rail entry replaces the
  whole row.g-0 contents (rail + pane) so the active class is set by
  the server on the freshly-rendered rail. Pane self-refresh on the
  ``settings:changed`` event also targets this same node.
{% endcomment %}
{% partialdef settings-card %}
    <aside class="col-12 col-md-3 border-end" aria-label="{% trans 'Settings sections' %}">
        <div class="card-body">{% partial settings-rail %}</div>
    </aside>
    <div class="col-12 col-md-9 d-flex flex-column">
        <div class="card-body">{% partial settings-pane %}</div>
    </div>
{% endpartialdef %}


{% block content %}
    <div class="card cj-sectioned-page">
        <div id="cj-settings-card"
             class="row g-0"
             {% if active_section %}
             hx-get="{% url 'settings:index' %}"
             hx-trigger="settings:changed from:body"
             hx-swap="innerHTML"
             hx-on::config-request="if (event.target === this) { event.detail.path = '{% url 'settings:index' %}' + window.location.search; }"
             {% endif %}>
            {% partial settings-card %}
        </div>
    </div>
{% endblock %}