{% load i18n %}
{% comment %}
  Generic in-card "rail" navigation for sectioned pages
  (``/settings/``, ``/administration/``, profile pages, ...).

  Mirrors the GitHub-style left-rail / right-pane layout: each
  top-level entry renders as a Tabler "subheader" group label, with
  its children as ``list-group-item-action`` rows beneath. Top-level
  entries without children render as standalone list items.

  Usage:

  ```django
  {% include "conjunto/includes/rail.html" with items=menus.administration %}
  ```

  Items are duck-typed against ``IMenuItem``: ``visible``, ``url``,
  ``has_children``, ``children``, ``selected``, ``disabled``, ``boost``,
  ``get_title``, ``get_icon``, ``badge``, ``badge_class``.

  A top-level item is treated as a "group" when it has children; the
  group label is always rendered as a non-clickable span (the group's
  children are the actionable items — making the label itself a link
  duplicates a child's destination and adds cognitive load).
{% endcomment %}

{% for item in items %}
    {% if item.visible %}
        {% if item.has_children %}
            <h4 class="subheader d-flex align-items-center{% if not forloop.first %} mt-4{% endif %}">
                {% if item.get_icon %}<i class="ti ti-{{ item.get_icon }} me-2"></i>{% endif %}
                <span>{{ item.get_title }}</span>
            </h4>
            <div class="list-group list-group-transparent">
                {% for child in item.children %}{% if child.visible %}
                    <a class="list-group-item list-group-item-action d-flex align-items-center ps-4{% if child.selected %} active{% endif %}{% if child.disabled %} disabled{% endif %}"
                       href="{{ child.url|default:'#' }}"
                       title="{{ child.get_title }}"
                       {% if child.url and child.url != '#' and not child.disabled and child.boost %}hx-boost="true"{% endif %}>
                        {% if child.get_icon %}<i class="ti ti-{{ child.get_icon }} me-2"></i>{% endif %}
                        <span class="flex-fill">{{ child.get_title }}</span>
                        {% if child.badge %}
                            <span class="badge ms-auto {{ child.badge_class|default:'badge-sm bg-red' }}">{{ child.badge }}</span>
                        {% endif %}
                    </a>
                {% endif %}{% endfor %}
            </div>
        {% else %}
            <div class="list-group list-group-transparent{% if not forloop.first %} mt-4{% endif %}">
                <a class="list-group-item list-group-item-action d-flex align-items-center{% if item.selected %} active{% endif %}{% if item.disabled %} disabled{% endif %}"
                   href="{{ item.url|default:'#' }}"
                   title="{{ item.get_title }}"
                   {% if item.url and item.url != '#' and not item.disabled and item.boost %}hx-boost="true"{% endif %}>
                    {% if item.get_icon %}<i class="ti ti-{{ item.get_icon }} me-2"></i>{% endif %}
                    <span class="flex-fill">{{ item.get_title }}</span>
                    {% if item.badge %}
                        <span class="badge ms-auto {{ item.badge_class|default:'badge-sm bg-red' }}">{{ item.badge }}</span>
                    {% endif %}
                </a>
            </div>
        {% endif %}
    {% endif %}
{% endfor %}