<!-- of-match-stats -->
<div ng-if="!match.homeTeam.stats && !match.guestTeam.stats" of-coming-soon class="stats-coming-soon"></div>
<div ng-if="match.homeTeam.stats && match.guestTeam.stats">
    <article class="card game-stats game-stats-general-play">
        <header class="card-header">
            <h1 class="card-title">{{'GENERAL_PLAY' | translate}}</h1>
        </header>
        <div class="card-body card-body-padding">
            <div of-match-stats-bars
                 title= "{{('POSSESSION' | translate)}}"
                 home-team="{{match.homeTeam.stats.possessionPercentage}}"
                 guest-team="{{match.guestTeam.stats.possessionPercentage}}"
                 percentage="true">
            </div>
            <div of-match-stats-bars
                 title="{{('DUELS_WON' | translate)}}"
                 home-team="{{match.homeTeam.stats.duelsWonPercentage}}"
                 guest-team="{{match.guestTeam.stats.duelsWonPercentage}}"
                 percentage="true">
            </div>
            <div of-match-stats-bars
                 title="{{('AERIAL_DUELS_WON' | translate)}}"
                 home-team="{{match.homeTeam.stats.duelsWonAirPercentage}}"
                 guest-team="{{match.guestTeam.stats.duelsWonAirPercentage}}"
                 percentage="true">
            </div>
            <div of-match-stats-bars
                 title="{{'OFFSIDES' | translate}}"
                 home-team="{{match.homeTeam.stats.totalOffside}}"
                 guest-team="{{match.guestTeam.stats.totalOffside}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{'CORNERS' | translate}}"
                 home-team="{{match.homeTeam.stats.cornerTaken}}"
                 guest-team="{{match.guestTeam.stats.cornerTaken}}"
                 percentage="false" in-view="loadMoreItems(2, $inview)">
            </div>
        </div>
    </article>

    <article class="card game-stats game-stats-attack" ng-if="elementsShown>1">
        <header class="card-header">
            <h1 class="card-title">{{'ATTACK' | translate}}</h1>
        </header>
        <div class="card-body card-body-padding">
            <div of-match-stats-bars
                 title="{{'GOALS' | translate}}"
                 home-team="{{match.homeTeam.stats.goals}}"
                 guest-team="{{match.guestTeam.stats.goals}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{'TOTAL_SHOTS' | translate}}"
                 home-team="{{match.homeTeam.stats.totalScoringAtt}}"
                 guest-team="{{match.guestTeam.stats.totalScoringAtt}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{'SHOTS_ON_TARGET' | translate}}"
                 home-team="{{match.homeTeam.stats.ontargetScoringAtt}}"
                 guest-team="{{match.guestTeam.stats.ontargetScoringAtt}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{('SHOT_ACCURACY' | translate)}}"
                 home-team="{{match.homeTeam.stats.shotAccuracy}}"
                 guest-team="{{match.guestTeam.stats.shotAccuracy}}"
                 percentage="true">
            </div>
            <div of-match-stats-bars
                 title="{{'BLOCKED_SHOTS' | translate}}"
                 home-team="{{match.homeTeam.stats.blockedScoringAtt}}"
                 guest-team="{{match.guestTeam.stats.blockedScoringAtt}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{'SHOTS_ON_BAR' | translate}}"
                 home-team="{{match.homeTeam.stats.shotsHitPostOrBar}}"
                 guest-team="{{match.guestTeam.stats.shotsHitPostOrBar}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{'SHOTS_FROM_INSIDE_BOX' | translate}}"
                 home-team="{{match.homeTeam.stats.shotsFromInsidebox}}"
                 guest-team="{{match.guestTeam.stats.shotsFromInsidebox}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{'SHOTS_FROM_OUTSIDE_BOX' | translate}}"
                 home-team="{{match.homeTeam.stats.shotsFromOutsidebox}}"
                 guest-team="{{match.guestTeam.stats.shotsFromOutsidebox}}"
                 percentage="false" in-view="loadMoreItems(3, $inview)">
            </div>
        </div>
    </article>

    <article class="card game-stats game-stats-defense" ng-if="elementsShown>2">
        <header class="card-header">
            <h1 class="card-title">{{'DEFENSE' | translate}}</h1>
        </header>
        <div class="card-body card-body-padding">
            <div of-match-stats-bars
                 title="{{'TACKLES' | translate}}"
                 home-team="{{match.homeTeam.stats.totalTackle}}"
                 guest-team="{{match.guestTeam.stats.totalTackle}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{('TACKLES_WON' | translate)}}"
                 home-team="{{match.homeTeam.stats.wonTacklePercent}}"
                 guest-team="{{match.guestTeam.stats.wonTacklePercent}}"
                 percentage="true">
            </div>
            <div of-match-stats-bars
                 title="{{'CLEARANCES' | translate}}"
                 home-team="{{match.homeTeam.stats.totalClearance}}"
                 guest-team="{{match.guestTeam.stats.totalClearance}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{'INTERCEPTIONS' | translate}}"
                 home-team="{{match.homeTeam.stats.interception}}"
                 guest-team="{{match.guestTeam.stats.interception}}"
                 percentage="false" in-view="loadMoreItems(4, $inview)">
            </div>
        </div>
    </article>

    <article class="card game-stats game-stats-distribution" ng-if="elementsShown>3">
        <header class="card-header">
            <h1 class="card-title">{{'DISTRIBUTION' | translate}}</h1>
        </header>
        <div class="card-body card-body-padding">
            <div of-match-stats-bars
                 title="{{'TOTAL_PASSES' | translate}}"
                 home-team="{{match.homeTeam.stats.totalPass}}"
                 guest-team="{{match.guestTeam.stats.totalPass}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{('LONG_PASSES' | translate)}}"
                 home-team="{{match.homeTeam.stats.longPassesPercent}}"
                 guest-team="{{match.guestTeam.stats.longPassesPercent}}"
                 percentage="true">
            </div>
            <div of-match-stats-bars
                 title="{{('PASSING_ACCURACY' | translate)}}"
                 home-team="{{match.homeTeam.stats.accuratePassesPercent}}"
                 guest-team="{{match.guestTeam.stats.accuratePassesPercent}}"
                 percentage="true">
            </div>
            <div of-match-stats-bars
                 title="{{('PASSING_ACCURACY_OPP_HALF' | translate)}}"
                 home-team="{{match.homeTeam.stats.accurateFwdZonePassesPercent}}"
                 guest-team="{{match.guestTeam.stats.accurateFwdZonePassesPercent}}"
                 percentage="true">
            </div>
            <div of-match-stats-bars
                 title="{{('PASSING_ACCURACY_OWN_HALF' | translate)}}"
                 home-team="{{match.homeTeam.stats.accurateBackZonePassesPercent}}"
                 guest-team="{{match.guestTeam.stats.accurateBackZonePassesPercent}}"
                 percentage="true">
            </div>
            <div of-match-stats-bars
                 title="{{'TOTAL_CROSSES' | translate}}"
                 home-team="{{match.homeTeam.stats.totalCross}}"
                 guest-team="{{match.guestTeam.stats.totalCross}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{('SUCCESSFUL_CROSSES' | translate)}}"
                 home-team="{{match.homeTeam.stats.accurateCrossesPercent}}"
                 guest-team="{{match.guestTeam.stats.accurateCrossesPercent}}"
                 percentage="true" in-view="loadMoreItems(5, $inview)">
            </div>
        </div>
    </article>

    <div class="card game-stats game-stats-discipline" ng-if="elementsShown>4">
        <header class="card-header">
            <h1 class="card-title">{{'DISCIPLINE' | translate}}</h1>
        </header>
        <div class="card-body card-body-padding">
            <div of-match-stats-bars
                 title="{{'FOULS_CONCEDED' | translate}}"
                 home-team="{{match.homeTeam.stats.fkFoulLost}}"
                 guest-team="{{match.guestTeam.stats.fkFoulLost}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{'YELLOW_CARDS' | translate}}"
                 home-team="{{match.homeTeam.stats.totalYelCard}}"
                 guest-team="{{match.guestTeam.stats.totalYelCard}}"
                 percentage="false">
            </div>
            <div of-match-stats-bars
                 title="{{'RED_CARDS' | translate}}"
                 home-team="{{match.homeTeam.stats.totalRedCard}}"
                 guest-team="{{match.guestTeam.stats.totalRedCard}}"
                 percentage="false">
            </div>
        </div>
    </div>
</div>
