<!--
  [isAnimated]="false": ngx-bootstrap's CollapseDirective builds an Angular animation
  player on each open/close but never destroys it on teardown, so the root animation
  engine retains the player and its onDone closure pins this directive — and via the
  view tree the whole c8y-context-dashboard — on every "Dashboard settings" open (leak).

  decision by Jan on 9/7/2026 renable it and start preparing to bump ngx-bootstrap to 21.2.1
-->
<div
  class="collapse c8y-top-drawer"
  [collapse]="isCollapsed"
  [isAnimated]="true"
>
  <div class="p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom">
    <span class="h4">{{ 'Dashboard settings' | translate }}</span>
  </div>

  @if (!isCollapsed) {
    <div class="d-flex">
      <c8y-tabs-outlet
        class="c8y-top-drawer--tabs"
        [tabs]="tabs"
        [outletName]="TABS_OUTLET_NAME"
        [orientation]="'vertical'"
        [openFirstTab]="true"
      ></c8y-tabs-outlet>

      <div
        class="inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24"
      >
        <router-outlet name="dashboard-details"></router-outlet>
      </div>
    </div>
  }

  <div class="c8y-top-drawer--footer">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      data-cy="dashboard-detail--cancel-dashboard"
      (click)="cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      type="button"
      data-cy="dashboard-detail--save-dashboard"
      (click)="save()"
      [disabled]="
        ((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) ||
        dashboardDetailService.saveButtonDisabled
      "
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</div>