{% extends "conjunto/app_base.html" %}
{% load i18n crispy_forms_tags %}

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

{% comment %}
  Layout follows Tabler's settings page pattern (https://preview.tabler.io/settings.html):

  - Outer   : .card > .row.g-0
  - Rail    : .col-12.col-md-3.border-end > .card-body
              h4.subheader (+ mt-4 on subsequent groups)
              .list-group.list-group-transparent >
                a.list-group-item.list-group-item-action.d-flex.align-items-center
                (add .active for the current section)
  - Pane    : .col-12.col-md-9.d-flex.flex-column > .card-body
              h2.mb-4           (active section title)
              h3.card-title     (first subsection)
              h3.card-title.mt-4 (subsequent subsections)
              p.card-subtitle   (optional description)
              form with small primary Save button

  Consecutive subsections are separated by an <hr> (emitted before each
  non-first subsection by the settings-pane partial).
{% endcomment %}

{% partialdef settings-rail %}
    <div class="card-body">
        {% 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{% 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-pane"
                       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 %}
    </div>
{% endpartialdef %}


{% comment %}
  settings-form is also rendered stand-alone on form_invalid, so it must not
  rely on forloop being present. The <hr> separator between consecutive
  subsections is emitted by the settings-pane partial 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 %}
    <div class="card-body">
        {% 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 %}
    </div>
{% endpartialdef %}


{% block content %}
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="row g-0">
                    <aside class="col-12 col-md-3 border-end">
                        {% partial settings-rail %}
                    </aside>
                    <div class="col-12 col-md-9 d-flex flex-column">
                        <div id="cj-settings-pane"
                                {% if active_section %}
                             hx-get="{% url 'settings:index' %}?section={{ active_section.name }}"
                             hx-trigger="settings:changed from:body"
                             hx-swap="innerHTML"
                                {% endif %}>
                            {% partial settings-pane %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}