<div class="card-body team-stats-card" ng-if="!isLoadingStats && stats">
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>
                        {{ 'TOP_STATS' | translate }}
                    </th>
                    <th class="col-xs-2">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr of-team-stats-card title="'AVERAGE_POSSESSION'" stat="stats.ballPossession" percentage="true"></tr>
                <tr of-team-stats-card title="'DUELS_WON'" stat="stats.duelsWon"></tr>
                <tr of-team-stats-card title="'PASSING_ACCURACY'" stat="stats.passingAccuracy" percentage="true"></tr>
                <tr of-team-stats-card title="'GOALS_PER_GAME'" stat="stats.goalsPerGame"></tr>
                <tr of-team-stats-card title="'YELLOW_CARDS'" stat="stats.yellowCards"></tr>
                <tr of-team-stats-card title="'RED_CARDS'" stat="stats.redCards"></tr>
            </tbody>
        </table>
    </div>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>
                        {{ 'GENERAL_PLAY' | translate }}
                    </th>
                    <th class="col-xs-2">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr of-team-stats-card title="'GAMES_PLAYED'" stat="stats.won + stats.lost + stats.drawn"></tr>
                <tr of-team-stats-card title="'GOALS'" stat="stats.goals"></tr>
                <tr of-team-stats-card title="'HEADED_GOALS'" stat="stats.headedGoals"></tr>
                <tr of-team-stats-card title="'DUELS'" stat="stats.duels"></tr>
                <tr of-team-stats-card title="'OFFSIDES'" stat="stats.offsides"></tr>
            </tbody>
        </table>
    </div>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>
                        {{'ATTACK' | translate}}
                    </th>
                    <th class="col-xs-2">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr of-team-stats-card title="'TOTAL_SHOTS'" stat="stats.totalShots"></tr>
                <tr of-team-stats-card title="'SHOT_ACCURACY'" stat="stats.shotingAccuracy" percentage="true"></tr>
                <tr of-team-stats-card title="'GOALS_FROM_INSIDE_BOX'" stat="stats.goalsFromInsideBox"></tr>
                <tr of-team-stats-card title="'GOALS_FROM_OUTSIDE_BOX'" stat="stats.goalsFromOutsideBox"></tr>
                <tr of-team-stats-card title="'GOALS_FROM_SET_PIECES'" stat="stats.goalsFromSetPieces"></tr>
                <tr of-team-stats-card title="'PENALTIES'" stat="stats.penalties"></tr>
                <tr of-team-stats-card title="'PENALTY_SUCCESS'" stat="stats.penaltiesSuccessful" percentage="true"></tr>
                <tr of-team-stats-card title="'GOALS_CONCEDED'" stat="stats.goalsConceded"></tr>
                <tr of-team-stats-card title="'GOALS_CONCEDED_PER_GAME'" stat="stats.goalsConcededPerGame"></tr>
                <tr of-team-stats-card title="'CLEAN_SHEETS'" stat="stats.cleanSheets"></tr>
            </tbody>
        </table>
    </div>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>
                        {{ 'DEFENCE' | translate }}
                    </th>
                    <th class="col-xs-2">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr of-team-stats-card title="'TACKLES'" stat="stats.tackles"></tr>
                <tr of-team-stats-card title="'TACKLES_WON'" stat="stats.tacklesWon"></tr>
                <tr of-team-stats-card title="'CLEARANCES'" stat="stats.clearances"></tr>
                <tr of-team-stats-card title="'BLOCKED_SHOTS'" stat="stats.blocks"></tr>
            </tbody>
        </table>
    </div>
         
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>
                        {{ 'DISTRIBUTION' | translate }}
                    </th>
                    <th class="col-xs-2">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr of-team-stats-card title="'INTERCEPTIONS'" stat="stats.interceptions"></tr>
                <tr of-team-stats-card title="'TOTAL_CROSSES'" stat="stats.totalCrossesOpenPlay"></tr>
                <tr of-team-stats-card title="'SUCCESSFUL_CROSSES'" stat="stats.crossAccuracyOpenPlay" percentage="true"></tr>
                <tr of-team-stats-card title="'FOUL_WON'" stat="stats.foulsWon"></tr>
            </tbody>
        </table>
    </div>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>
                        {{ 'DISCIPLINE' | translate }}
                    </th>
                    <th class="col-xs-2">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr of-team-stats-card title="'FOUL_AGAINST'" stat="stats.foulsConceded"></tr>
                <tr of-team-stats-card title="'PENALTIES_CONCEDED'" stat="stats.penaltiesConceded"></tr>
            </tbody>
        </table>
    </div>
</div>