<!--
  ~ Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<ng-template #defaultHeader>
  <h3>
    <button *ngIf="back.observers.length > 0" bciIntegratedButton (click)="back.emit()" class="sidebar-back-button">
      <mat-icon fontIcon="Bosch-Ic-arrow-expand-left"></mat-icon>
    </button>
    {{ title }}
  </h3>
</ng-template>
<ng-template #defaultFooter>
  <button *ngIf="confirm.observers.length > 0" class="sidebar-apply-button" bciPrimaryButton (click)="confirm.emit()">
    {{ intl.apply }}
  </button>
</ng-template>
<div class="slide" *ngIf="active" [@slide]="animation">
  <div class="sidebar-header">
    <ng-container [ngTemplateOutlet]="customHeader || defaultHeader"></ng-container>
  </div>
  <div class="sidebar-center">
    <ng-content></ng-content>
  </div>
  <div class="sidebar-footer">
    <ng-container [ngTemplateOutlet]="customFooter || defaultFooter"></ng-container>
  </div>
</div>
