<mat-card appearance="raised">
  @if(title() !== undefined || subtitle() !== undefined) {
  <mat-card-header>
    <mat-card-title class="!text-base">{{ title() }}</mat-card-title>
    <mat-card-subtitle>{{ subtitle() }}</mat-card-subtitle>
  </mat-card-header>
  }
  <mat-card-content>
    <div class="w-full flex flex-col">
      @if (chartLabel() !== undefined && chartValue() !== undefined) {
      <div class="flex flex-col relative">
        <div
          class="text-small absolute right-1/4 z-50 cursor-help"
          [matTooltip]="chartLabel()"
        >
          &#9432;
        </div>
        <app-gauge-chart [value]="chartValue()!"></app-gauge-chart>
      </div>
      } @if (chartValue() !== undefined) {
      <mat-divider class="py-2"></mat-divider>
      }
      <ng-content select="app-info-card-content" class="flex flex-col">
      </ng-content>
      <ng-content></ng-content>
    </div>
    @if (hasMainContentContent() && hasFooterContent()) {
    <mat-divider class="py-2"></mat-divider>
    }
  </mat-card-content>
  @if (hasFooterContent()) {
  <mat-card-footer class="mb-2 flex justify-around">
    <ng-content select="app-info-card-footer"></ng-content>
  </mat-card-footer>
  }
</mat-card>
