<ion-view title="Futbal - {{ 'Team Detail' | translate }}">
    <ion-content padding="true" class="has-header team-detail-wrapper">
        <div ng-if="fromFavorites" ng-click="goBack()" class="button button-energized">{{ 'Go back' | translate }}</div>
        <div class="centered">
            <h1>{{team.name}}</h1>
            <img class="logo" ng-src="./img/flags/512/{{team.picture_name}}.png" />
            <div
                    ng-click="favoriteAction(team)"
                    class="centered button icon ion-thumbsup favorite-team-action {{team.favoriteClass}}">
            </div>
        </div>

        <div ng-if="team.homepage_url || team.wiki_link" class="button-bar bar-royal button-outline links">
            <a class="button" ng-href="{{team.homepage_url}}">Homepage</a>
            <a class="button" ng-href="{{team.wiki_link}}">Wikipedia</a>
        </div>

        <h2>{{ 'Matches' | translate }}</h2>
        <!-- Copied from data.html, make it re-usable later -->
        <ion-list class="list matches-wrapper">
            <ion-item
                    ng-repeat="match in team.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" ng-src="./img/flags/64/{{match.home_team_picture}}.png" />
                        <div ng-show="match.home_team_goals" 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 && match.home_team_goals">
                        <span>{{match.home_team_goals}} - {{match.away_team_goals}}</span>
                    </p>
                    <p ng-hide="match.away_team_goals && match.home_team_goals" class="vs">vs. </p>
                    <div class="away-team">
                        <img ng-hide="match.away_team_goals" class="team-logo" ng-src="./img/flags/64/{{match.away_team_picture}}.png" />
                        <div ng-show="match.away_team_goals" 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>

        <h2>{{ 'Standings' | translate }} {{team.standings[0].group}}</h2>
        <table class="bet-wrapper">
            <tr>
                <th></th>
                <th>{{ 'P' | translate }}</th>
                <th>{{ 'W' | translate }}</th>
                <th>{{ 'D' | translate }}</th>
                <th>{{ 'L' | translate }}</th>
                <th>{{ 'GD' | translate }}</th>
                <th>{{ 'PTS' | translate }}</th>
            </tr>
            <tr ng-repeat="standing in team.standings">
                <td><img height="25" ng-src="./img/flags/64/{{standing.team_picture}}.png" /></td>
                <td>{{standing.played}}</td>
                <td>{{standing.won}}</td>
                <td>{{standing.draw}}</td>
                <td>{{standing.lost}}</td>
                <td>{{standing.goal_difference}}</td>
                <td>{{standing.points}}</td>
            </tr>
        </table>
    </ion-content>
</ion-view>
