<article ng-if="match.events.length" class="card">
    <header class="card-header">
        <h1 class="card-title">{{'HIGHLIGHTS' | translate}}</h1>
    </header>
    <div class="card-body-blank">
        <div ng-repeat="event in ::match.events | orderBy:'-minute'" class="of-match-highlights">
            <article 
                of-match-highlights-goal
                ng-if="event.type == 'Goal' || event.type == 'Penalty' || event.type == 'Own'" 
                home-team-id="{{::match.homeTeam.id}}" 
                guest-team-id="{{::match.guestTeam.id}}"
                class="ticker">
            </article>
            <article 
                of-match-highlights-substitution
                ng-if="event.type == 'Substitution'" 
                home-team-id="{{match.homeTeam.id}}" 
                guest-team-id="{{match.guestTeam.id}}"
                class="ticker">
            </article>
            <article 
                of-match-highlights-yellow
                ng-if="event.type == 'Yellow' || event.type == 'SecondYellow'" 
                home-team-id="{{match.homeTeam.id}}" 
                guest-team-id="{{match.guestTeam.id}}"
                class="ticker">
            </article>
            <article 
                of-match-highlights-red
                ng-if="event.type == 'Red' || event.type == 'StraightRed'" 
                home-team-id="{{match.homeTeam.id}}" 
                guest-team-id="{{match.guestTeam.id}}" 
                class="ticker">
            </article>
        </div>
    </div>
</article>

