<div
  (click)="toggleExpand()"
  (keydown)="onHeaderKeydown($event)"
  class="collapsible-header"
  [attr.tabindex]="isGroup ? 0 : null"
  [attr.role]="isGroup ? 'button' : null"
  [attr.aria-expanded]="isGroup ? isExpanded : null"
  [attr.aria-controls]="isGroup ? panelId : null"
>
  @if (isIconBefore()) {
    <mat-icon class="collapsible-expand-icon">expand_more</mat-icon>
  }
  @if (icon) {
    <mat-icon class="collapsible-additional-icon">{{ icon }} </mat-icon>
  }

  @if (isTitleDragHandle()) {
    <div
      class="collapsible-title is-drag-handle"
      cdkDragHandle
    >
      {{ title() }}
    </div>
  } @else {
    <div class="collapsible-title">{{ title() }}</div>
  }

  <ng-content select="[actions]"></ng-content>

  @if (!isIconBefore()) {
    <mat-icon class="collapsible-expand-icon">expand_more</mat-icon>
  }
</div>

@if (isExpanded) {
  <div
    [@expand]
    class="collapsible-panel ani-expand-collapse"
    [attr.id]="panelId"
  >
    <ng-content></ng-content>
  </div>
}
