<ion-view title="Futbal - {{ 'World Cup' | translate }}">
    <div class="bar bar-subheader">
        <div class="button-bar bar-royal">
            <a class="button activated" scroll-top-on-click ng-click="toggleView('matches')">{{ 'Matches' | translate }}</a>
            <a class="button activated" scroll-top-on-click ng-click="toggleView('teams')">{{ 'Teams' | translate }}</a>
        </div>
    </div>
    <ion-content class="has-header has-subheader data-wrapper">
        <ion-list ng-show="viewMode == 'matches'" class="list matches-wrapper">
            <div ng-if="!matches || matches.length == 0">
                <div class="centered loading-content">
                    <i class="icon ion-loading-c"></i>
                </div>
            </div>

            <div id="scroll-to-top"></div>
            <ion-item
                    ng-repeat="match in matches"
                    class="item item-match item-icon-right"
                    ng-click="clickMatchAction()"
                    ng-href="#/app/match/{{match.id}}"
            >
                <h2 class="title">
                    <span ng-show="match.group">{{match.group}}</span>
                    <span ng-show="match.round && match.group">-</span>
                    <span ng-show="match.round">{{ 'Round' | translate }} {{match.round}}</span>
                </h2>
                <h2 class="when">
                    ({{match.niceDate}})
                </h2>
                <div class="details">
                    <div class="home-team">
                        <img ng-hide="match.home_team_goals != null" ng-src="./img/flags/64/{{match.home_team_picture}}.png" />
                        <div ng-show="match.home_team_goals != null" class="has-goals">
                            <img ng-src="./img/flags/64/{{match.home_team_picture}}.png" />
                        </div>
                        <p class="team-name">{{match.home_team}}</p>
                    </div>
                    <p class="result" ng-show="match.away_team_goals != null && match.home_team_goals != null">
                        <span>{{match.home_team_goals}} - {{match.away_team_goals}}</span>
                    </p>
                    <p ng-hide="match.away_team_goals != null && match.home_team_goals != null" class="vs">vs. </p>
                    <div class="away-team">
                        <img ng-hide="match.away_team_goals != null" class="team-logo" ng-src="./img/flags/64/{{match.away_team_picture}}.png" />
                        <div ng-show="match.away_team_goals != null" class="has-goals">
                            <img ng-src="./img/flags/64/{{match.away_team_picture}}.png" />
                        </div>
                        <p class="team-name">{{match.away_team}}</p>
                    </div>
                </div>
                <i class="icon ion-chevron-right detail-arrow"></i>
            </ion-item>
        </ion-list>

        <ion-list ng-show="viewMode == 'teams'" class="list teams-wrapper">
            <div ng-if="!teams || teams.length == 0">
                <div class="centered loading-content">
                    <i class="icon ion-loading-c"></i>
                </div>
            </div>
            <ion-item
                    ng-repeat="team in teams | filter: { fake: false}"
                    class="item item-thumbnail-left item-icon-right"
                    ng-href="#/app/team/{{team.teamId}}">
                <img ng-src="./img/flags/256/{{team.picture_name}}.png">
                <h2 class="name">{{team.name}}</h2>
                <i class="icon ion-chevron-right detail-arrow"></i>
            </ion-item>
        </ion-list>

    </ion-content>
</ion-view>
