@if (disabled()) {
	<mat-card class="lane-card disabled-card">
		<mat-card-header class="mat-header">
			<mat-card-title-group>
				<mat-card-title>{{ laneLabel() }}</mat-card-title>
				<mat-card-subtitle>{{ 'lane.disabled_subtitle' | translate }}</mat-card-subtitle>
			</mat-card-title-group>
		</mat-card-header>
		<mat-card-content>
			<div class="disabled-message">
				<mat-icon class="disabled-icon" aria-hidden="true">block</mat-icon>
				<p class="mat-body-large">{{ 'lane.disabled_title' | translate }}</p>
				<p class="mat-body-small">{{ 'lane.disabled_detail' | translate }}</p>
			</div>
			<button
				type="button"
				matFab
				extended
				color="primary"
				class="enable-lane-button"
				(click)="onToggleDisableLane()"
			>
				<mat-icon aria-hidden="true">add_circle</mat-icon>
				{{ 'lane.enable' | translate }}
			</button>
		</mat-card-content>
	</mat-card>
} @else {
	<mat-card class="lane-card">
		<mat-card-header class="mat-header">
			<mat-card-title-group>
				<mat-card-title>{{ laneLabel() }}</mat-card-title>
				<mat-card-subtitle>
					{{ champion() ? ('lane.locked' | translate) : ('lane.needed' | translate) }}
				</mat-card-subtitle>
			</mat-card-title-group>
			<button
				matMiniFab
				[disabled]="state.isLoading() || !state.hasChampions()"
				(click)="onToggleDisableLane()"
			>
				<mat-icon aria-hidden="true">close</mat-icon>
			</button>
		</mat-card-header>
		<mat-card-content>
			@if (champion(); as champ) {
				<div class="champion-details">
					<img
						[ngSrc]="champ.icon"
						width="96"
						height="96"
						[class.loading-image]="state.isLoading()"
						[alt]="champ.name + ' portrait'"
						[priority]="true"
						class="champion-icon"
					/>
					<p class="champion-name mat-title-medium">{{ champ.name }}</p>
				</div>
				<mat-chip-set class="roles-set" [attr.aria-label]="'Roles for ' + champ.name">
					@for (role of champ.roles; track role) {
						<mat-chip>{{ roleLabel(role) }}</mat-chip>
					}
				</mat-chip-set>
			} @else {
				<p class="champion-name champion-name-empty mat-title-medium">
					{{ 'lane.no_champion' | translate }}
				</p>
				<p class="champion-roles mat-body-small">
					{{ 'lane.roll_again_hint' | translate }}
				</p>
			}
			@if (canReRoll()) {
				<button
					type="button"
					matFab
					extended
					color="accent"
					class="change-champion-button"
					[disabled]="state.isLoading() || !state.hasChampions()"
					(click)="onChangeChampion(false)"
				>
					<mat-icon aria-hidden="true">refresh</mat-icon>
					{{ 'lane.reroll' | translate }}
				</button>
			} @else {
				<button
					type="button"
					matFab
					extended
					color="accent"
					class="change-champion-button"
					[disabled]="
						state.isLoading() ||
						!state.hasChampions() ||
						(!state.isShiftPressed() && !canReRoll())
					"
					(click)="onChangeChampion(state.isShiftPressed())"
					[class.shift-active]="state.isShiftPressed()"
				>
					@if (!state.isShiftPressed()) {
						<mat-icon aria-hidden="true">heart_broken</mat-icon>
					} @else {
						<mat-icon aria-hidden="true">lock_open_right</mat-icon>
					}
					@if (!state.isShiftPressed()) {
						<p>{{ 'lane.no_rerolls_left' | translate }}</p>
					} @else {
						<p>{{ 'lane.force_reroll' | translate }}</p>
					}
				</button>
			}
		</mat-card-content>
	</mat-card>
}