<div class="container" *ngIf="playerDetails">
    <section class="player-primary-data">
        <section class="details">    
            <h2 class="name"> {{ playerDetails.name }} </h2>
            
            <div class="role"> <ion-icon name="shirt-outline"></ion-icon> {{ playerDetails.player_skill.text }} </div>
        </section>
    </section>

    <ng-container *ngFor="let stat of playerDetails.stats.format;let i = index;">
        <ng-container *ngIf="i === 6">
            <header class="stats-header">
                <h4> {{ stat.parent_series_name }} </h4>
            </header>
    
            <ul class="statistics" *ngIf="stat.overall.batting_record">
                <li>
                    <label> 100s </label>
                    <h5> {{ stat.overall.batting_record.hundreds }} </h5>
                </li>
            
                <li>
                    <label> 50s </label>
                    <h5> {{ stat.overall.batting_record.fifties }} </h5>
                </li>
            
                <li>
                    <label> SR </label>
                    <h5> {{ stat.overall.batting_record.strike_rate }} </h5>
                </li>
            </ul>
    
            <ul class="statistics" *ngIf="stat.overall.bowling_record">
                <li>
                    <label> Wickets </label>
                    <h5> {{ stat.overall.bowling_record.wickets }} </h5>
                </li>
            
                <li>
                    <label> Maidens </label>
                    <h5> {{ stat.overall.bowling_record.wickets }} </h5>
                </li>
            
                <li>
                    <label> Economy </label>
                    <h5> {{ stat.overall.bowling_record.economy_rate }} </h5>
                </li>
            </ul>
        </ng-container>
    </ng-container>

    <section class="about">
        <header> ABOUT </header>
        <ul>
            <li>
                <label> Full name </label>
                <p> {{ playerDetails.fullname }} </p>
            </li>
            <li>
                <label> Nick Name </label>
                <p> {{ playerDetails.nick_name }} </p>
            </li>
            <li>
                <label> DOB </label>
                <p> {{ playerDetails.dob }} </p>
            </li>
            <li>
                <label> POB </label>
                <p> {{ playerDetails.place_birth }} </p>
            </li>
            <li *ngIf="playerDetails.writeup">
                <label> Description </label>
                <p [innerHTML]="playerDetails.writeup"></p>
            </li>
        </ul>
    </section>
    
    <!-- <ng-container *ngFor="let stat of playerDetails.stats.format;let i = index;">
        <ng-container *ngIf="i !== 2">
            <header class="stats-header">
                <h4> {{ stat.comp_type }} </h4>
            </header>
    
            <ul class="statistics" *ngIf="stat.overall.batting_record">
                <li>
                    <label> 100s </label>
                    <h5> {{ stat.overall.batting_record.hundreds }} </h5>
                </li>
            
                <li>
                    <label> 50s </label>
                    <h5> {{ stat.overall.batting_record.fifties }} </h5>
                </li>
            
                <li>
                    <label> SR </label>
                    <h5> {{ stat.overall.batting_record.strike_rate }} </h5>
                </li>
            </ul>
    
            <ul class="statistics" *ngIf="stat.overall.bowling_record">
                <li>
                    <label> Wickets </label>
                    <h5> {{ stat.overall.bowling_record.wickets }} </h5>
                </li>
            
                <li>
                    <label> Maidens </label>
                    <h5> {{ stat.overall.bowling_record.wickets }} </h5>
                </li>
            
                <li>
                    <label> Economy </label>
                    <h5> {{ stat.overall.bowling_record.economy_rate }} </h5>
                </li>
            </ul>

        </ng-container>
    </ng-container> -->
</div>