<div>
    <mat-card class="meta-text-block">
        <mat-card-header>
            <mat-card-title>
                <div class="title-container">
                    <div class="ellipsis-overflow">
                        <ng-container *ngTemplateOutlet="title"></ng-container>
                    </div>
                    <div class="action-row" *ngIf="showActionRow">
                        <ng-container *ngTemplateOutlet="actionRow"></ng-container>
                    </div>
                </div>
            </mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <!-- Content -->
            <div
                #contentBox
                [osHeightResizing]="resizeSubject"
                class="content"
                [ngClass]="!isExpanded && !disableExpandControl ? 'collapsed' : ''"
            >
                <ng-container *ngTemplateOutlet="content"></ng-container>
            </div>
            <!-- Expanding control -->
            <div class="small show-entire-text" *ngIf="canExpand && !disableExpandControl">
                <a (click)="isExpanded = !isExpanded">{{ isExpanded ? ('Hide more text' | translate) : ('Show full text' | translate) }}</a>
            </div>
        </mat-card-content>
    </mat-card>
</div>

<ng-template #title>
    <ng-content select=".meta-text-block-title"></ng-content>
</ng-template>
<ng-template #content>
    <ng-content select=".meta-text-block-content"></ng-content>
</ng-template>
<ng-template #actionRow>
    <ng-content select=".meta-text-block-action-row"></ng-content>
</ng-template>
