<ion-content>

    <app-facebook-login></app-facebook-login>

    <div class="content-container">
        <div class="common-heading-holder">
            <h2 class="main-header"> # Discover </h2>
        
            <section class="segments">
                <button [ngClass]="{'active' : selectedTab === 'news'}"
                (click)="selectedTab = 'news'"> News </button>
                <button [ngClass]="{'active' : selectedTab === 'videos'}"
                (click)="selectedTab = 'videos'"> Videos </button>
                <button [ngClass]="{'active' : selectedTab === 'gallery'}"
                (click)="selectedTab = 'gallery'"> Gallery </button>
            </section>
        </div>
    
        <ion-slides  #slides [options]="slideOpts" *ngIf="selectedTab === 'news'">
            <ion-slide *ngFor="let news of newsData">
                <div class="image-holder">
                    <figure>
                        <img [src]="image_url + news.image_path + news.image_file_name">
                    </figure>
    
                    <button>
                        <ion-icon name="newspaper"></ion-icon>
                    </button>
                </div>
    
                <section class="content">
                    <h4> {{ news.short_title }} </h4>
    
                    <div class="details" [innerHtml]="transformYourHtml(news.short_desc)">
                    </div>
                </section>           
    
                <section class="action-buttons">
                    <section class="shortcuts">
                        <button (click)="share(news.short_title, image_url + news.image_path + news.image_file_name)">
                            <ion-icon name="share-social-outline"></ion-icon>
                        </button>

                        <button class="bookmark-button" (click)="toggleBookmark(news.title_alias)" [ngClass]="{'marked' : isPostBookmarked(news.title_alias)}">
                            <ion-icon name="bookmark-outline"></ion-icon>
                            <ion-icon name="bookmark"></ion-icon>
                        </button>

                        <button class="like-button" (click)="toggleLike(news.title_alias)" [ngClass]="{'liked' : isArticleLiked(news.title_alias)}">
                            <ion-icon name="heart-outline"></ion-icon>
                            <ion-icon name="heart"></ion-icon>
                        </button>
                    </section>
    
                    <button class="read-more" (click)="showNewsDetails(news.title_alias);"> 
                        <span> More </span>            
                        <ion-icon name="chevron-forward-outline"></ion-icon> 
                    </button>
                </section>
            </ion-slide>
        </ion-slides>

        <ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'videos'">
            <ion-slide *ngFor="let news of videoData">
                <div class="image-holder">
                    <figure>
                        <img [src]="image_url + news.image_path + news.image_file_name">
                    </figure>
    
                    <button>
                        <ion-icon name="play"></ion-icon>
                    </button>
                </div>
    
                <section class="content">
                    <h4> {{ news.short_title ? news.short_title : news.asset_title }} </h4>
    
                    <div class="details" [innerHtml]="transformYourHtml(news.short_desc)">
                    </div>
                </section>           
    
                <section class="action-buttons">
                    <section class="shortcuts">
                        <button (click)="share(news.short_title ? news.short_title : news.asset_title, image_url + news.image_path + news.image_file_name)">
                            <ion-icon name="share-social-outline"></ion-icon>
                        </button>

                        <!-- class="bookmark-button" <button (click)="toggleBookmark(news.title_alias)" [ngClass]="{'marked' : isPostBookmarked(news.title_alias)}">
                            <ion-icon name="bookmark-outline"></ion-icon>
                            <ion-icon name="bookmark"></ion-icon>
                        </button> -->

                        <button class="like-button" (click)="toggleLike(news.title_alias)" [ngClass]="{'liked' : isArticleLiked(news.title_alias)}">
                            <ion-icon name="heart-outline"></ion-icon>
                            <ion-icon name="heart"></ion-icon>
                        </button>
                    </section>                
    
                    <button class="read-more" (click)="showNewsDetails(news.title_alias);"> 
                        <span> More </span>            
                        <ion-icon name="chevron-forward-outline"></ion-icon> 
                    </button>
                </section>
            </ion-slide>
        </ion-slides>


        <ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'gallery'">
            <ion-slide *ngFor="let news of galleryData">
                <div class="image-holder">
                    <figure>
                        <img [src]="image_url + news.image_path + news.image_file_name">
                    </figure>
                </div>
    
                <section class="content">
                    <h4> {{ news.short_title ? news.short_title : news.asset_title }} </h4>
    
                    <div class="details" [innerHtml]="transformYourHtml(news.short_desc)">
                    </div>
                </section>           
    
                <section class="action-buttons">
                    <section class="shortcuts">
                        <button (click)="share(news.short_title ? news.short_title : news.asset_title, image_url + news.image_path + news.image_file_name)">
                            <ion-icon name="share-social-outline"></ion-icon>
                        </button>

                        <!-- class="bookmark-button" <button (click)="toggleBookmark(news.title_alias)" [ngClass]="{'marked' : isPostBookmarked(news.title_alias)}">
                            <ion-icon name="bookmark-outline"></ion-icon>
                            <ion-icon name="bookmark"></ion-icon>
                        </button> -->

                        <button class="like-button" (click)="toggleLike(news.title_alias)" [ngClass]="{'liked' : isArticleLiked(news.title_alias)}">
                            <ion-icon name="heart-outline"></ion-icon>
                            <ion-icon name="heart"></ion-icon>
                        </button>
                    </section>           
    
                    <button class="read-more" (click)="showNewsDetails(news.title_alias);"> 
                        <span> More </span>            
                        <ion-icon name="chevron-forward-outline"></ion-icon> 
                    </button>
                </section>
            </ion-slide>
        </ion-slides>
    </div>

</ion-content>
