<ion-content *ngIf="newsDetails">
    <header class="topbar">
        <button (click)="back()" class="close-article-button active"> 
            <ion-icon name="close"></ion-icon> 
        </button>
    </header>

    <div class="image-holder">
        <figure *ngIf="!newsDetails.images">
            <img [src]="image_url + newsDetails.image_path + newsDetails.image_file_name">
        </figure>

        <figure *ngIf="newsDetails.images">
            <img [src]="image_url + newsDetails.images[0].data.imagePath + newsDetails.images[0].data.imageName">
        </figure>
        
        <a *ngIf="newsDetails.hls_url" [href]="newsDetails.hls_url" target="_blank">
            <button>
                <ion-icon name="play"></ion-icon>
            </button>
        </a>
        
        <h4> {{ newsDetails.title }} </h4>
    </div>

    <section class="content">
        <div class="details" *ngIf="newsDetails.full_text || newsDetails.desc" [innerHtml]="transformYourHtml(newsDetails.full_text ? newsDetails.full_text : newsDetails.desc)">
        </div>

        <ng-container *ngIf="newsDetails.images">
            <figure *ngFor="let image of newsDetails.images">
                <img [src]="image_url + getLowRestImagePath(image.data.imagePath) + image.data.imageName">
            </figure>
        </ng-container>
        

        <ng-container *ngIf="alias_title">
            <div id="fb-root"></div>
            <div class="fb-comments" data-width="300px" 
            data-href="https://www.punjabkingsipl.in/news/{{ alias_title }}" 
            data-numposts="20"></div>
        </ng-container>        

    </section>

    <ion-fab vertical="bottom" horizontal="start" slot="fixed">
        <ion-fab-button class="share-button" (click)="share()">
            <ion-icon name="share-social-outline"></ion-icon>
        </ion-fab-button>
    </ion-fab>
</ion-content>
