<!-- The horizontal is for compatibility, we're going to get rid of this once card component can be removed -->
<div #cardDiv role="radio" *ngIf="label" [class]="getClass() + ' horizontal'" (click)="onCardClick()"
	[attr.aria-checked]="selected" (mouseover)="onCardHoverChanged($event)" (mouseout)="onCardHoverChanged($event)"
	tabIndex="0" [style.width]="width" [style.height]="height">
	<ng-container *ngIf="isVerticalButton || isDetailsCard || isImageCard">
		<span *ngIf="hasStatus" class="card-status">
			<div class="status-content" [style.backgroundColor]="statusColor"></div>
		</span>
		<span *ngIf="showRadioButton" class="selection-indicator-container">
			<div *ngIf="showAsSelected" class="selection-indicator"></div>
		</span>
		<ng-container *ngIf="isVerticalButton">
			<div class="card-vertical-button">
				<div *ngIf="iconPath" class="iconContainer">
					<div [class]="iconClass" [style.width]="iconWidth" [style.height]="iconHeight"></div>
				</div>
				<h4 class="card-label">{{label}}</h4>
				<div *ngIf="descriptions.length > 0" class="model-card-description-container-legacy">
					<div *ngFor="let desc of descriptions">
						<div *ngIf="desc.label; else separator" [style.font-weight]="desc.fontWeight"
							class="model-card-list-item-description-legacy">
							<span>{{desc.label}}</span><span
								class="model-card-list-item-description-value-legacy">{{desc.value}}</span>
						</div>
						<ng-template #separator>
							<div style="height: 12px"></div>
						</ng-template>
					</div>
				</div>
			</div>
		</ng-container>

		<ng-container *ngIf="isDetailsCard">
			<div class="card-content">
				<h4 class="card-label">{{label}}</h4>
				<p class="card-value">{{value}}</p>
				<span *ngIf="actions">
					<table class="model-table-legacy">
						<tr *ngFor="let action of actions">
							<td class="table-row">{{action.label}}</td>
							<td *ngIf="action.actionTitle" class="table-row">
								<a class="pointer prominent"
									(click)="onDidActionClick(action)">{{action.actionTitle}}</a>
							</td>
						</tr>
					</table>
				</span>
			</div>
		</ng-container>

		<ng-container *ngIf="isImageCard">
			<div class="card-content">
				<div [class]="'card-image ' + iconClass"></div>
				<div *ngIf="label" class="card-label-overlay">
					<h4 class="card-label">{{label}}</h4>
				</div>
			</div>
		</ng-container>
	</ng-container>
	<ng-container *ngIf="isListItemCard">
		<div class="list-item-content">
			<div>
				<div [class]="iconClass">{{label}}</div>
				<div *ngFor="let desc of descriptions">
					<div class="list-item-description">{{desc}}</div>
				</div>
				<span *ngIf="showRadioButton" class="selection-indicator-container">
					<div *ngIf="showAsSelected" class="selection-indicator"></div>
				</span>
			</div>
		</div>
	</ng-container>
</div>
