<mat-card-subtitle>
    <span class="border-bottom border-navy text-navy fw-normal fs-5">{{ data.name }}</span>
    <small class="font-monospace text-navy float-end">[ {{ data.count | number : '1.0' }} ]</small>
</mat-card-subtitle>
<ul class="list-unstyled mt-2">
    @for (champion of data.teams; track champion; let index = $index) {
    <li [class]="(champion.id !== data.positions[data.slots[(index)]].toString()) ? 'text-red' : ''">
        <span class="slot">slot {{data.slots[(index)]}}</span>
        @if (champion.id !== data.positions[data.slots[(index)]].toString()) {
            <span class="text-decoration-line-through">{{ getMemberNameById(data.positions[data.slots[(index)]].toString()) }}</span>
            <mat-icon fontIcon="swap_horiz" class="mx-3 align-middle icon-xsmall"></mat-icon>
        }
        <span>{{ champion.name }}</span>
        <span class="font-monospace float-end">
            @switch (teamType) {
                @case ('heroes') {
                    @if (champion.id !== data.positions[data.slots[(index)]].toString()) {
                        <span class="text-decoration-line-through">{{ getMemberHeroesPowerById(data.positions[data.slots[(index)]].toString()) | number : '1.0' }}</span>
                        <mat-icon fontIcon="swap_horiz" class="mx-3 align-middle icon-xsmall"></mat-icon>
                    }
                    {{ champion.heroes.power | number : '1.0' }}
                }
                @case ('titans') {
                    @if (champion.id !== data.positions[data.slots[(index)]].toString()) {
                        <span class="text-decoration-line-through">{{ getMemberTitansPowerById(data.positions[data.slots[(index)]].toString()) | number : '1.0' }}</span>
                        <mat-icon fontIcon="swap_horiz" class="mx-3 align-middle icon-xsmall"></mat-icon>
                    }
                    {{ champion.titans.power | number : '1.0' }}
                }
                @default {
                    0
                }
            }
        </span>
    </li>
    }
</ul>
