kxip-app/src/app/match-details/match-details.page.html

<ion-content>

    <section class="action-buttons">
        <div class="nav" (click)="back()">
            <button> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
        </div>
        <div class="action">
            <button> <ion-icon name="share-social-outline"></ion-icon> </button>            
        </div>
    </section>

    <div class="content-container">
        
        <div class="field-container">
            <figure class="field-image">
                <img src="assets/home-team/ground.svg">
            </figure>
            
            <ul class="field-setting">
                <li *ngFor="let player of matchData.home.players"
                [ngStyle]="{ 'top.%': getPosition(player.position.y), 'left.%': getPosition(player.position.x) }">
                    <img [src]="player.image">
                </li>
            </ul>

        </div>

        <section class="player-details" *ngIf="isPlayerSelected">
            <app-player-details></app-player-details>
        </section>

    </div>    

</ion-content>