<div [class.collapsed]="isCollapsed" class="card panel-card {{klass}}">

    <div class="card-header d-flex justify-content-between align-items-center">

        <div class="flex-grow-1 align-items-center d-flex">

            <div class="d-flex align-items-center">
                <scrm-close-button *ngIf="isClosable()" [config]="close"></scrm-close-button>
                <scrm-minimise-button *ngIf="isCollapsible()" [config]="minimiseConfig()"></scrm-minimise-button>
                <ng-content select="[panel-icon-area]"></ng-content>
            </div>

            <div class="pl-1 panel-title">{{title}}</div>
        </div>


        <div class="panel-buttons float-right">
            <ng-content select="[panel-header-button]"></ng-content>
        </div>
    </div>

    <div class="card-body p-{{bodyPadding}}" [ngbCollapse]="isCollapsed">
        <ng-content select="[panel-body]"></ng-content>
    </div>
</div>
