<ion-view title="Futbal - {{ 'Home' | translate }}">
    <ion-content padding="true" class="has-header">
        <ion-refresher
                pulling-text="{{ 'Refresh feed' | translate }}"
                on-refresh="doRefresh()"
                pulling-icon="ion-ios7-arrow-thin-down">
        </ion-refresher>

        <div ng-repeat="item in items" class="list card feed-wrapper">
            <!-- Ads -->
            <div ng-if="item.type == 'ad'" class="ad">
                <div id="iaAdPlaceholder"></div>
            </div>
            <!-- Posts -->
            <div ng-if="item.type == 'social_media'" class="social-media">
                <div class="item item-image">
                    <!-- a href="{{item.url}}" -->
                    <img ng-click="triggerModal()" ng-src="{{item.media_url}}">
                    <!-- /a -->
                </div>

                <div class="item item-body item-text-wrap">
                    <p ng-bind-html="item.niceDescription" class="description">
                    </p>

                    <p class="additional-info">
                        <span class="subdued">{{item.niceCreatedAt}}</span>
                        (<span class="subdued">via {{item.niceSource}}</span>)
                    </p>
                </div>

                <div class="item tabs tabs-secondary tabs-favorite tabs-icon-left {{item.favoriteClass}}">
                    <a href="" data-id="{{item.id}}" ng-click="favoriteAction()" class="tab-item favorite-action ">
                        <i class="icon ion-heart"></i>
                        {{ item.action | translate }}
                    </a>
                    <a href="" class="tab-item" ng-click="shareAction(item.shareMessage)">
                        <i class="icon ion-share"></i>
                        {{ 'Share' | translate }}
                    </a>
                </div>
            </div>

            <!-- News -->
            <div ng-if="item.type == 'news'">
                <div class="item item-image">
                    <img ng-click="triggerModal()" ng-src="{{item.large_url}}">
                </div>

                <div class="item item-body item-text-wrap">
                    <h1 class="title">{{item.title}}</h1>
                    <p class="additional-info">
                        <span class="subdued">{{item.niceCreatedAt}}</span>
                        (<span class="subdued">via {{item.niceSource}}</span>)
                    </p>
                </div>

                <div class="item tabs tabs-secondary tabs-favorite tabs-icon-left {{item.favoriteClass}}">
                    <a href="" data-id="{{item.id}}" ng-click="favoriteAction()" class="tab-item favorite-action ">
                        <i class="icon ion-heart"></i>
                        {{ item.action | translate }}
                    </a>
                    <a href="" class="tab-item" ng-click="shareAction(item.shareMessage)">
                        <i class="icon ion-share"></i>
                        {{ 'Share' | translate }}
                    </a>
                </div>
            </div>

            <!-- Game -->
            <div ng-if="item.type == 'game'" class="game">

                <div class="item item-body item-text-wrap">
                    <h1 class="title">{{item.title}}</h1>
                    <p class="additional-info">
                        <span class="subdued" ng-hide="item.away_team_goals != null && item.home_team_goals != null">{{item.niceDate}}</span>
                        <span class="subdued" ng-show="item.away_team_goals != null && item.home_team_goals != null">{{item.niceCreatedAt}}</span>
                    </p>
                    <div class="details">
                        <div class="home-team">
                            <img class="logo" ng-src="./img/flags/256/{{item.home_team_picture}}.png" />
                            <p class="team-name">{{item.home_team}}</p>
                        </div>
                        <p class="result" ng-show="item.away_team_goals != null && item.home_team_goals != null">
                            <span>{{item.home_team_goals}} - {{item.away_team_goals}}</span>
                        </p>
                        <p ng-hide="item.away_team_goals != null && item.home_team_goals != null" class="vs">vs. </p>
                        <div class="away-team">
                            <img class="logo" ng-src="./img/flags/256/{{item.away_team_picture}}.png" />
                            <p class="team-name">{{item.away_team}}</p>
                        </div>
                    </div>
                </div>

                <div class="item tabs tabs-secondary tabs-favorite tabs-icon-left {{item.favoriteClass}}">
                    <a
                            ng-href="#/app/match/{{item.match_id}}"
                            data-id="{{item.id}}"
                            ng-click="linkAction()"
                            class="tab-item details-action">
                        {{ 'Details of match' | translate }}
                    </a>
                </div>
            </div>
        </div>

        <div ng-if="!items || items.length == 0">
            <div class="centered loading-content">
                <i class="icon ion-loading-c"></i>
            </div>
        </div>

        <div ng-if="isLoadingMore">
            <div class="centered">
                <i class="icon ion-loading-c"></i>
            </div>
        </div>

        <div class="centered">
            <div ng-hide="!items || items.length == 0" class="button button-energized load-more-feed" ng-click="loadMore()">
                {{ 'Load More' | translate }}
             </div>
        </div>
    </ion-content>
</ion-view>
