@if(imagePosition === 'top') {
    <p-card class="w-card-top-image"
            [header]="header"
            [subheader]="subheader"
            [style]="{ width: width, cursor: 'pointer' }"
            (click)="onCardClick()">
        <ng-template pTemplate="header">
            <div class="w-card-image-container">
                @if (image && isPath(image)){
                    <img class="w-full w-card-image" [src]="image"/>
                }@else {
                    <div class="w-full" style="position: relative;">
                        <img class="w-full h-full w-card-image" [src]="'assets/images/analytics-background.png'">
                        <span [class]="'w-icon-card-image w-icon '+defaultImageIcon"></span>
                    </div>
                }
                @if(icon) {
                    <div class="w-card-image-icon">
                        <w-icons [name]="icon"
                                 [color]="iconColor"
                                 [height]="15"
                                 [width]="15">
                        </w-icons>
                    </div>
                }
            </div>
        </ng-template>
        <ng-content select=".content"></ng-content>
        <ng-template pTemplate="footer">
            <div (click)="$event.stopPropagation()"
                 (keydown)="$event.stopPropagation()">
                <ng-content></ng-content>
            </div>
        </ng-template>
    </p-card>
} @else {
    <div class="inline-flex">
        <div class="flex w-card-left-image-container">
            @if (image && isPath(image)){
                <img class="w-card-left-image" [src]="image" (click)="onCardClick()"/>
            }@else {
                <div class="w-full" style="position: relative;">
                    <img class="w-full h-full w-card-left-image" [src]="'assets/images/analytics-background.png'">
                    <span [class]="'w-icon-card-image w-icon '+defaultImageIcon"></span>
                </div>
            }

            @if(icon) {
                <div class="w-card-image-icon w-card-left-image-icon">
                    <w-icons [name]="icon"
                             [color]="iconColor"
                             [height]="15"
                             [width]="15">
                    </w-icons>
                </div>
            }
        </div>
        <div class="flex">
            <p-card class="flex w-card-left-image-card"
                    [header]="header"
                    [subheader]="subheader"
                    [style]="{ width: width, cursor: 'pointer' }"
                    (click)="onCardClick()">
                <ng-content select=".left-image-content"></ng-content>
                <ng-template pTemplate="footer">
                    <div class="w-card-left-image-footer"
                         (click)="$event.stopPropagation()"
                         (keydown)="$event.stopPropagation()">
                        <ng-content select=".left-image-card-footer"></ng-content>
                    </div>
                </ng-template>
            </p-card>
        </div>
    </div>
}