<ion-view title="Futbal - {{ 'Match Detail' | translate }}">
    <ion-content padding="true" class="has-header">
        <ion-refresher
                pulling-text="{{ 'Refresh match' | translate }}"
                on-refresh="doRefresh()">
        </ion-refresher>
        <div ng-if="fromModal" ng-click="goBack()" class="button button-energized">{{ 'Go back' | translate }}</div>

        <div class="match-data row">
            <div class="col col-50 home-team">
                <img class="logo" ng-src="./img/flags/256/{{match.home_team_picture}}.png" />
                <h1 class="title">{{match.home_team}}</h1>
                <div ng-show="match.home_team_goals != null">
                    <i class="flaticon-football"></i> <div class="goals info">{{match.home_team_goals}}</div>
                </div>
                <div ng-show="match.home_team_red_card_details" class="red-cards">
                    <i class="flaticon-card red"></i> <div class="goals info">{{match.home_team_redCardDetails}}</div>

                </div>
                <div ng-show="match.home_team_yellow_card_details" class="red-cards">
                    <i class="flaticon-card yellow"></i> <div class="goals info">{{match.home_team_yellowCardDetails}}</div>
                </div>
            </div>
            <div class="col col-50 away-team">
                <img class="logo" ng-src="./img/flags/256/{{match.away_team_picture}}.png" />
                <h1 class="title">{{match.away_team}}</h1>
                <div ng-show="match.away_team_goals != null">
                    <i class="flaticon-football"></i> <div class="goals info">{{match.away_team_goals}}</div>
                </div>
                <div ng-show="match.away_team_red_card_details" class="red-cards">
                    <i class="flaticon-card red"></i> <div class="goals info">{{match.away_team_redCardDetails}}</div>
                </div>
                <div ng-show="match.away_team_yellow_card_details" class="red-cards">
                    <i class="flaticon-card yellow"></i> <div class="goals info">{{match.away_team_yellowCardDetails}}</div>
                </div>
            </div>
        </div>

        <div class="match-data row">
            <div class="col col-50">
                <div class="go-to-teams-detail" ng-hide="match.home_team_fake">
                    <a class="button button-stable" ng-href="#/app/team/{{match.home_team_id}}">{{ 'Detail View' | translate }}</a>
                </div>
            </div>
            <div class="col col-50">
                <div class="go-to-teams-detail" ng-hide="match.away_team_fake">
                    <a class="button button-stable" ng-href="#/app/team/{{match.away_team_id}}">{{ 'Detail View' | translate }}</a>
                </div>
            </div>
        </div>

        <div ng-show="match.time != null">
            <h2>{{ 'Events' | translate }} </h2>
            <div class="list">
                <div class="item item-divider">
                    {{ 'Time' | translate }}: {{match.time}}
                </div>
                <div class="item item-text-wrap" ng-repeat="event in match.match_events">
                    <div class="additional-info">
                        <img height="20" ng-show="event.type.substring(0,4) === 'away'" ng-src="./img/flags/64/{{match.away_team_picture}}.png" />
                        <img height="20" ng-show="event.type.substring(0,4) === 'home'" ng-src="./img/flags/64/{{match.home_team_picture}}.png" />
                        <i ng-show="event.type == 'away_goal' || event.type == 'home_goal'" class="flaticon-football"></i>
                        <i ng-show="event.type == 'away_yellow' || event.type == 'home_yellow'" class="flaticon-card yellow"></i>
                        <i ng-show="event.type == 'away_red' || event.type == 'home_red'" class="flaticon-card red"></i>
                        <i ng-show="event.type == 'away_sub' || event.type == 'home_sub'" class="ion-arrow-swap"></i>
                        {{event.minute}}' {{event.player}}

                    </div>
                </div>
            </div>

            <h2>{{ 'Teams' | translate }}</h2>
            <div class="list">
                <div class="item item-divider">
                    {{match.home_team}}
                </div>
                <div class="item item-text-wrap">
                    <strong>{{ 'Lineup' | translate }}</strong>
                    <div class="additional-info">
                        {{match.home_team_lineup_goalkeeper}} -
                        {{match.home_team_lineup_defense}} -
                        {{match.home_team_lineup_midfield}} -
                        {{match.home_team_lineup_forward}}
                    </div>
                </div>
                <div class="item item-text-wrap">
                    <strong>{{ 'Substitutes' | translate }}</strong>
                    <div class="additional-info">
                        {{match.home_team_substitutes}}
                    </div>
                </div>
                <div class="item item-text-wrap">
                    <strong>{{ 'Coach' | translate }}</strong>
                    <div class="additional-info">
                        {{match.home_team_lineup_coach}}
                    </div>
                </div>
            </div>
            <div class="list">
                <div class="item item-divider">
                    {{match.away_team}}
                </div>
                <div class="item item-text-wrap">
                    <strong>{{ 'Lineup' | translate }}</strong>
                    <div class="additional-info">
                        {{match.away_team_lineup_goalkeeper}} -
                        {{match.away_team_lineup_defense}} -
                        {{match.away_team_lineup_midfield}} -
                        {{match.away_team_lineup_forward}}
                    </div>
                </div>
                <div class="item item-text-wrap">
                    <strong>{{ 'Substitutes' | translate }}</strong>
                    <div class="additional-info">
                        {{match.away_team_substitutes}}
                    </div>
                </div>
                <div class="item item-text-wrap">
                    <strong>{{ 'Coach' | translate }}</strong>
                    <div class="additional-info">
                        {{match.away_team_lineup_coach}}
                    </div>
                </div>
            </div>
        </div>
        <h2>{{ 'Details' | translate }}</h2>
        <div class="list">
            <div class="item item-divider">
                {{ 'Date' | translate }}
            </div>
            <div class="item item-text-wrap">
                <div class="additional-info">{{match.niceDate}}</div>
            </div>
            <div class="item item-divider">
                {{ 'Location' | translate }}
            </div>
            <div class="item item-text-wrap">
                <div class="additional-info">{{match.location}}</div>
            </div>
            <div class="item item-divider">
                {{ 'Group' | translate }}
            </div>
            <div class="item item-text-wrap">
                <div class="additional-info">{{match.group}}</div>
            </div>
            <div class="item item-divider">
                {{ 'Round' | translate }}
            </div>
            <div class="item item-text-wrap">
                <div class="additional-info">{{match.round}}</div>
            </div>
        </div>
        <!-- Create button bar out of odds and bets when more information than now (otherwise too long) -->
        <div ng-if="match.odds && match.odds.length > 0">
            <h2>{{ 'Odds - Bets' | translate }}</h2>
            <table class="bet-wrapper">
                <tr>
                    <th>{{ 'Name' | translate }}</th>
                    <th><img height="25" class="logo" ng-src="./img/flags/64/{{match.home_team_picture}}.png" /></th>
                    <th><i class="icon ion-close-round"></i></th>
                    <th><img height="25" class="logo" ng-src="./img/flags/64/{{match.away_team_picture}}.png" /></th>
                </tr>
                <tr ng-repeat="bet in match.odds">
                    <td>
                        <a
                                class="button button-balanced button-clear"
                                ng-click="openExternal(bet.bookmaker_url)">
                            {{bet.bookmaker_name}}
                        </a>
                    </td>
                    <td>{{bet.home}}</td>
                    <td>{{bet.draw}}</td>
                    <td>{{bet.away}}</td>
                </tr>
            </table>
        </div>
        <p class="not-yet" ng-if="match.hasStarted">
            <span class="divider"></span>
            <span class="info message">{{ 'Game not yet started' | translate }}.</span>
        </p>
        </ion-content>
    </ion-content>
</ion-view>
