<!-- one-live-scores -->
<div layout="column" layout-align="start">

    <div class="loading-message">
        <div ng-if="isLoading" class="animate network-indicator">
            <div id="loading-bar-spinner" class="">
                <div class="spinner-icon">
                </div>
            </div>
        </div>
    </div>

    <div class="matches-timeline" flex>
        <div ui-scroll="match in matchesDataSource"
             padding="0.5"
             buffer-size="10"
             top-visible="topItem"
             is-loading="isLoading"
             class="live-games-wrapper">

            <div ng-if="displayNoGameToday($index)"
                 class="live-date-header text-center">
                <span class="live-no-game-today">{{ 'NO_GAME_TODAY' | translate }}</span>
            </div>

            <div ng-if="displayDateForIndex($index)"
                 class="live-date-header text-center">
                <span ng-if="isToday(match.kickoff)" class="live-word-date">{{::'TODAY' | translate}}</span>
                <span ng-if="isTomorrow(match.kickoff)" class="live-word-date">{{::'TOMORROW' | translate}}</span>
                <span ng-if="isYesterday(match.kickoff)" class="live-word-date">{{::'YESTERDAY' | translate}}</span>
                <span ng-if="displayDate(match.kickoff)">{{::kickoffDay(match.kickoff)}}</span>
            </div>
            <div ng-if="displayCompetitionName($index)" class="live-competition-header" ng-click="goToCompetition(match.competition.id)">
                <img ng-if="match.competition"
                     ng-src="{{ ::$root.CONFIG.resources.default_flag_logo }}"
                     of-img-src="getFlagUrl(match.competition.id)"/>
                <span class="live-competition-name competition-name-{{ ::match.competition.id }}">
                    {{ ::match.competition.name }}
                </span>
            </div>

            <div ng-if="displayGroupName($index)">
                <span class="live-group-name">Group {{ ::match.group_name }}</span>
            </div>

            <div class="live-game-row">
                <div layout="row" ng-click="onClick(match)" id="m-{{ match.id }}">
                    <div class="live-team-name" flex>
                        <span>
                            {{ ::match.team_home.name }}
                        </span>
                    </div>
                    <div class="live-logo text-right">
                        <img of-img-src="match.team_home.logo_url_small"
                             ng-src="{{::$root.CONFIG.resources.default_team_logo}}"/>
                    </div>
                    <div ng-if="match.period != 'Postponed' && match.period != 'Abandoned'"
                         class="score-table-result line-height">
                            <!-- LIVE RESULTS, TEAM, COMPETITION MATCH ONGOING -->
                            <span ng-if="match.game_status == 'InMatch'"
                                  title="{{ (match.kickoff | amDateFormat: ('DATE_FORMAT'|translate)) + ' ' + (match.kickoff | amDateFormat: ('TIME_FORMAT'|translate)) }}"
                                  class="in-match">{{ match.score_home }}&nbsp;:&nbsp;{{ match.score_away }}
                            </span>
                            <!-- LIVE RESULTS, TEAM AND COMPETITION MATCHDAY MATCH FINISHED -->
                            <span ng-if="match.game_status == 'PostMatch'"
                                  title="{{ (match.kickoff | amDateFormat: ('DATE_FORMAT'|translate)) + ' ' + (match.kickoff | amDateFormat: ('TIME_FORMAT'|translate)) }}"
                                  class="post-match">{{::match.score_home}}&nbsp;:&nbsp;{{::match.score_away}}
                            </span>
                            <!-- LIVE RESULTS COMPETITION MATCHDAY MATCH IN FUTURE -->
                            <span ng-if="match.game_status == 'PreMatch' && match.kickoff"
                                  class="pre-match">{{ match.kickoff | amDateFormat: ('TIME_FORMAT'|translate) }}
                            </span>
                    </div>
                    <div class="score-table-result line-height"
                         ng-if="match.period == 'Postponed' || match.period == 'Abandoned'">
                        <!-- LIVE RESULTS COMPETITION MATCHDAY MATCH POSTPONED OR CANCELED -->
                        <i class="glyphicon glyphicon-exclamation-sign" title="{{ 'ABANDONED' | translate }}"></i>
                    </div>
                    <div class="live-logo text-left">
                        <img of-img-src="match.team_away.logo_url_small"
                             ng-src="{{::$root.CONFIG.resources.default_team_logo}}"/>
                    </div>
                    <div class="live-team-name live-guest-team" flex>
                        <span>
                            {{ ::match.team_away.name }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
