<ActionBarLogo (myEvent)="onDrawerButtonTap($event)"></ActionBarLogo>
<RadSideDrawer #drawer showOverNavigation="false" gesturesEnabled="{{android}}" [drawerTransition]="sideDrawerTransition">
    <StackLayout tkDrawerContent class="drawer">
        <MyDrawer [selectedPage]="'Home'"></MyDrawer>
    </StackLayout>


    <GridLayout rows="*, auto" class="page page-content" tkMainContent>

        <StackLayout class="fade-in" row="0" orientation="vertical" *ngIf="loading==false && network_error==false">
            <StackLayout>
                <PullToRefresh (refresh)="refreshList($event)">
                    <ScrollView orientation="vertical">
                        <StackLayout>
                            <StackLayout>
                                <ScrollView orientation="horizontal" scrollBarIndicatorVisible="false">
                                    <StackLayout orientation="horizontal" class="games">
                                        <StackLayout class="game" width="{{screen_width}}" *ngFor="let game of games">
                                            <StackLayout class="game-inner">
                                                <StackLayout class="game-date">
                                                    <Label text="{{game.league}}, {{game.round}}. kolo" class="game-round"></Label>
                                                    <Label text="{{ game.date | format_date }}" class="game-date-text"></Label>
                                                </StackLayout>
                                                <StackLayout class="game-data">
                                                    <FlexboxLayout flexDirection="row">
                                                        <StackLayout flexGrow="1" class="game-team">
                                                            <WebImage src="{{game.team_home.logo}}" height="40" class="game-team-logo"></WebImage>
                                                            <Label text="{{game.team_home.name}}" textWrap="true" class="game-team-name"></Label>
                                                        </StackLayout>
                                                        <StackLayout flexGrow="1" class="game-score">
                                                            <Label class="game-score-inner" text="-:-" textWrap="true" *ngIf="game.score==null"></Label>
                                                            <Label class="game-score-inner" text="{{game.score}}" textWrap="true" *ngIf="game.score!=null"></Label>
                                                        </StackLayout>
                                                        <StackLayout flexGrow="1" class="game-team">
                                                            <WebImage src="{{game.team_away.logo}}" height="40" class="game-team-logo"></WebImage>
                                                            <Label text="{{game.team_away.name}}" textWrap="true" class="game-team-name"></Label>
                                                        </StackLayout>
                                                    </FlexboxLayout>
                                                </StackLayout>
                                                <StackLayout class="game-button" orientation="horizontal" horizontalAlignment="center" [nsRouterLink]="['/game', game.id]"
                                                    pageTransition="flip">
                                                    <WebImage src="~/assets/menu_icons/matches.png" width="15"></WebImage>
                                                    <Label text="informácie o zápase" class="game-button-btn"></Label>
                                                </StackLayout>
                                            </StackLayout>
                                        </StackLayout>
                                    </StackLayout>
                                </ScrollView>
                            </StackLayout>
                            <StackLayout>
                                <StackLayout class="hp-partners">
                                    <StackLayout class="hp-partners-heading">
                                        <Label text="Partneri klubu"></Label>
                                    </StackLayout>
                                    <FlexboxLayout flexDirection="row">
                                        <StackLayout class="partner" *ngFor="let partner of partners">
                                            <WebImage src="{{partner.img_url}}" stretch="aspectFit" width="100%" class="partner-image" (tap)="open_url(partner.url)"></WebImage>
                                        </StackLayout>
                                    </FlexboxLayout>
                                </StackLayout>
                                <StackLayout class="articles-list">
                                    <StackLayout class="article" [nsRouterLink]="['/article', article.id]" pageTransition="slideLeft" *ngFor="let article of articles, let i=index">
                                        <StackLayout class="article-photo">
                                            <WebImage src="{{article.photo}}" stretch="aspectFill" placeholder="~/assets/placeholder.png" class="article-photo-image"></WebImage>
                                        </StackLayout>
                                        <StackLayout class="article-body">
                                            <StackLayout class="article-data">
                                                <FlexboxLayout flexDirection="row">
                                                    <StackLayout class="article-date" orientation="horizontal">
                                                        <WebImage src="~/assets/menu_icons/date.png" class="article-date-ico"></WebImage>
                                                        <Label text="{{ article.date | format_date }}" class="article-date-text"></Label>
                                                    </StackLayout>
                                                    <StackLayout class="article-sticker" orientation="horizontal">
                                                        <WebImage src="~/assets/menu_icons/tag.png" class="article-sticker-ico"></WebImage>
                                                        <Label text="{{article.category}}" class="article-sticker-text"></Label>
                                                    </StackLayout>
                                                    <StackLayout class="article-stickers" flexGrow="1" orientation="horizontal">
                                                        <WebImage src="~/assets/article_stickers/text.png" class="article-stickers-image" *ngIf="article.sticker_text==true"></WebImage>
                                                        <WebImage src="~/assets/article_stickers/video.png" class="article-stickers-image" *ngIf="article.sticker_video==true"></WebImage>
                                                        <WebImage src="~/assets/article_stickers/photo.png" class="article-stickers-image" *ngIf="article.sticker_photogallery==true"></WebImage>
                                                    </StackLayout>
                                                </FlexboxLayout>
                                            </StackLayout>
                                            <StackLayout class="article-heading">
                                                <Label text="{{article.heading}}" class="article-heading-text" textWrap="true"></Label>
                                            </StackLayout>
                                        </StackLayout>
                                        <StackLayout *ngIf="i==330">
                                            <StackLayout class="banner" *ngFor="let banner of banners">
                                                <WebImage src="{{banner.image}}" stretch="aspectFit" width="100%" class="banner-image" (tap)="open_url(banner.url)"></WebImage>
                                            </StackLayout>
                                        </StackLayout>
                                    </StackLayout>
                                </StackLayout>


                                <StackLayout class="load-more-button">
                                    <Button class="btn btn-primary" text="Načítať ďalšie" (tap)="load_more_articles()" *ngIf="loading_more_articles==false"></Button>
                                    <LoadingSmall *ngIf="loading_more_articles==true"></LoadingSmall>
                                </StackLayout>

                            </StackLayout>
                        </StackLayout>
                    </ScrollView>
                </PullToRefresh>
            </StackLayout>
        </StackLayout>

        <Loading *ngIf="loading==true && network_error==false"></Loading>
        <StackLayout height="100%" (tap)="check_connection()" *ngIf="network_error==true">
            <NetworkError></NetworkError>
        </StackLayout>
        <Tabs></Tabs>

    </GridLayout>

</RadSideDrawer>