<aside class="secondary-sidebar"
  [class.collapsed]="isCollapsed"
  [style.width.px]="isCollapsed ? null : width">

  <div class="collapse-toggle" (click)="toggleCollapse()">
    <lucide-icon [img]="isCollapsed ? PanelLeftOpen : PanelLeftClose" [size]="16"></lucide-icon>
  </div>

  @if (!isCollapsed) {
    @if (titleRoute) {
      <button
        type="button"
        class="sidebar-title sidebar-title--link"
        [class.active]="isTitleActive()"
        [title]="'secondarySidebar.backToCampaignHome' | translate"
        (click)="clickTitle()">
        <lucide-icon [img]="Home" [size]="14" class="sidebar-title-icon"></lucide-icon>
        <span class="sidebar-title-text">{{ title }}</span>
      </button>
    } @else {
      <h2 class="sidebar-title">{{ title }}</h2>
    }
    @if (createActions.length) {
      <div class="actions-row">
        @for (action of createActions; track action) {
          <button
            class="btn-pill"
            [class.primary]="action.variant === 'primary'"
            [class.secondary]="action.variant === 'secondary'"
            (click)="runAction(action)">
            {{ action.label }}
          </button>
        }
      </div>
    }
    <!-- cdkDropListGroup : connecte toutes les drop lists de l'arbre (déplacement d'un
         nœud d'une liste à l'autre). Chaque ligne est un <app-sidebar-tree-node> :
         comme c'est un VRAI composant déclaré statiquement dans la drop list, son
         cdkDrag résout sa drop list par DI (impossible via un template outlet-é). -->
    <div class="tree">
      <div class="tree-list" cdkDropList
        id="sidebar-root"
        [cdkDropListData]="rootDragData"
        [cdkDropListConnectedTo]="dropListIds"
        [cdkDropListDisabled]="!dndEnabled()"
        [cdkDropListEnterPredicate]="rootEnterPredicate"
        (cdkDropListDropped)="onDrop(null, $event)">
        @for (item of items; track item.id; let first = $first) {
          <!-- En-tête de section RENDU HORS du nœud (sinon il serait emporté par le
               drag du premier item). C'est un élément non-déplaçable de la drop list. -->
          @if (item.sectionHeaderBefore) {
            <div class="tree-section-header" [class.first]="first">{{ item.sectionHeaderBefore }}</div>
          }
          @if (dndEnabled() && item.dragKind) {
            <app-sidebar-tree-node cdkDrag [cdkDragData]="item" cdkDragLockAxis="y"
              [item]="item" [level]="0"></app-sidebar-tree-node>
          } @else {
            <app-sidebar-tree-node [item]="item" [level]="0"></app-sidebar-tree-node>
          }
        }
      </div>
    </div>
    <!-- Panneau bas (ex: Templates) ------------------------------------ -->
    @if (bottomPanel) {
      <section class="bottom-panel">
        <div class="panel-header-row">
          <button class="panel-header" (click)="togglePanel()">
            <span class="panel-title">{{ bottomPanel.title }}</span>
            <lucide-icon
              [img]="panelOpen ? ChevronDown : ChevronRight"
              [size]="14">
            </lucide-icon>
          </button>
          @if (bottomPanel.headerAction; as action) {
            <button
              type="button"
              class="panel-header-action"
              [title]="action.label"
              [attr.aria-label]="action.label"
              (click)="runPanelHeaderAction($event, action)">
              <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
            </button>
          }
        </div>
        @if (panelOpen) {
          <ul class="panel-list">
            @for (item of bottomPanel.items; track item) {
              <li>
                <button
                  class="panel-item"
                  [class.action]="item.isAction"
                  (click)="clickPanelItem(item)">
                  <span class="panel-item-label">{{ item.label }}</span>
                  @if (item.meta) {
                    <span class="panel-item-meta">{{ item.meta }}</span>
                  }
                </button>
              </li>
            }
          </ul>
        }
      </section>
    }
  }

  <!-- Poignée de redimensionnement sur le bord droit (masquée si replié) -->
  @if (!isCollapsed) {
    <div class="resize-handle"
      (mousedown)="startResize($event)"
    [title]="'secondarySidebar.resizeHandle' | translate"></div>
  }
</aside>
