{% 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. A child
  that itself has children renders as a nested sub-group: a small
  inline subheader at ``ps-3`` (1rem) and its grandchildren as rows
  at ``ps-6`` (2rem) — one Bootstrap spacer per nesting level
  (``ps-6`` is a conjunto extension; Bootstrap default jumps from
  1.5rem to 3rem). Deeper nesting is not supported — flatten the
  menu.

  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).

  Pass ``searchable=True`` (optionally with ``search_placeholder``) to
  prepend a live client-side filter box: each actionable row carries a
  lowercased ``data-search`` haystack and toggles ``d-none`` via Alpine
  when the typed query no longer matches; each top-level group is
  wrapped in ``.cj-rail-group`` so it collapses (CSS ``:has()``) once
  all its rows are filtered out. The caller need not provide an
  ``x-data`` scope — this partial opens its own.

  Each row's ``data-search`` haystack is its (ancestor) titles plus an
  optional duck-typed ``keywords`` attribute on the item — declare
  ``keywords = _("…")`` on an ``IMenuItem`` to make a row findable by
  terms that are not in its title (e.g. words from the page it links
  to). Admin page bodies live in templates and are not auto-indexed, so
  ``keywords`` is the opt-in hook for content search on those rows.
{% endcomment %}
{% if searchable %}<div x-data="{ q: '' }">{% include "conjunto/includes/_rail_filter_input.html" with placeholder=search_placeholder %}{% endif %}
{% for item in items %}
    {% if item.visible %}
        {% if searchable %}<div class="cj-rail-group">{% endif %}
        {% if item.has_children %}
            <h4 class="subheader d-flex align-items-center fw-bold ps-0{% if not forloop.first %} mt-3{% 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 %}
                    {% if child.has_children %}
                        <div class="list-group-item list-group-item-action d-flex align-items-center ps-5 fw-medium text-secondary disabled" aria-disabled="true">
                            {% if child.get_icon %}<i class="ti ti-{{ child.get_icon }} me-2"></i>{% endif %}
                            <span class="flex-fill">{{ child.get_title }}</span>
                        </div>
                        {% for grandchild in child.children %}{% if grandchild.visible %}
                            <a class="list-group-item list-group-item-action d-flex align-items-center ps-6{% if grandchild.selected %} active{% endif %}{% if grandchild.disabled %} disabled{% endif %}"
                               href="{{ grandchild.url|default:'#' }}"
                               title="{{ grandchild.get_title }}"
                               {% if searchable %}data-search="{{ item.get_title|lower }} {{ child.get_title|lower }} {{ grandchild.get_title|lower }} {{ grandchild.keywords|lower }}" :class="{ 'd-none': q && !$el.dataset.search.includes(q.trim().toLowerCase()) }"{% endif %}
                               {% if grandchild.url and grandchild.url != '#' and not grandchild.disabled and grandchild.boost %}hx-boost="true"{% endif %}>
                                {% if grandchild.get_icon %}<i class="ti ti-{{ grandchild.get_icon }} me-2"></i>{% endif %}
                                <span class="flex-fill">{{ grandchild.get_title }}</span>
                                {% if grandchild.badge %}
                                    <span class="badge ms-auto {{ grandchild.badge_class|default:'badge-sm bg-red' }}">{{ grandchild.badge }}</span>
                                {% endif %}
                            </a>
                        {% endif %}{% endfor %}
                    {% else %}
                        <a class="list-group-item list-group-item-action d-flex align-items-center ps-5{% if child.selected %} active{% endif %}{% if child.disabled %} disabled{% endif %}"
                           href="{{ child.url|default:'#' }}"
                           title="{{ child.get_title }}"
                           {% if searchable %}data-search="{{ item.get_title|lower }} {{ child.get_title|lower }} {{ child.keywords|lower }}" :class="{ 'd-none': q && !$el.dataset.search.includes(q.trim().toLowerCase()) }"{% endif %}
                           {% 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 %}
                {% 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 searchable %}data-search="{{ item.get_title|lower }} {{ item.keywords|lower }}" :class="{ 'd-none': q && !$el.dataset.search.includes(q.trim().toLowerCase()) }"{% endif %}
                   {% 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 %}
        {% if searchable %}</div>{% endif %}
    {% endif %}
{% endfor %}
{% if searchable %}</div>{% endif %}