<div class="event-detail mx-auto my-3 py-3 overflow-auto">
    <div class="ms-3">
        <i class="arrow left"></i>
        <span class="back" (click)="backToEventTable()">Back</span>
    </div>
    <div class="my-4 mx-auto" style="width: fit-content;">
        <p class="event-name h4 px-2" *ngIf="eventLoaded">{{eventDetails.name}}
            <i class="material-icons favorite p-2 m-2" *ngIf="!isFavorite" (click)="addFav()">favorite_border</i>
            <i class="material-icons favorite-hit p-2 m-2" *ngIf="isFavorite" (click)="cancelFav()">favorite</i>
        </p>
    </div>
    <div class="my-3">
        <mat-tab-group mat-stretch-tabs mat-align-tabs="center" backgroundColor="primary">
            <mat-tab label="Events">
                <div class="row m-0 p-3" *ngIf="eventLoaded">
                    <div class="col-sm">
                        <div *ngIf="eventDetails.date!='' || eventDetails.time!=''"
                            class="my-3 mx-auto detail-container">
                            <div class="detail-label h5">Date</div>
                            <div class="detail-content">{{eventDetails.date}} {{eventDetails.time}}</div>
                        </div>
                        <div *ngIf="eventDetails.artistTeams.length>0" class="my-3 mx-auto detail-container">
                            <div class="detail-label h5">Artist/Teams</div>
                            <div class="detail-content">{{combineStrings(eventDetails.artistTeams)}}</div>
                        </div>
                        <div *ngIf="eventDetails.venue!=''" class="my-3 mx-auto detail-container">
                            <div class="detail-label h5">Venue</div>
                            <div class="detail-content">{{eventDetails.venue}}</div>
                        </div>
                        <div *ngIf="eventDetails.genres.length>0" class="my-3 mx-auto detail-container">
                            <div class="detail-label h5">Genres</div>
                            <div class="detail-content">{{combineStrings(eventDetails.genres)}}</div>
                        </div>
                        <div *ngIf="eventDetails.priceRanges!=''" class="my-3 mx-auto detail-container">
                            <div class="detail-label h5">Price Ranges</div>
                            <div class="detail-content">{{eventDetails.priceRanges}}</div>
                        </div>
                        <div *ngIf="eventDetails.ticketStatus!=''" class="my-3 mx-auto detail-container">
                            <div class="detail-label h5">Ticket Status</div>
                            <div [ngSwitch]="eventDetails.ticketStatus">
                                <div *ngSwitchCase="'onsale'" class="detail-status mx-auto p-1"
                                    style="background-color: green;">On Sale</div>
                                <div *ngSwitchCase="'offsale'" class="detail-status mx-auto p-1"
                                    style="background-color: red;">Off Sale</div>
                                <div *ngSwitchCase="'cancelled'" class="detail-status mx-auto p-1"
                                    style="background-color: black;">Cancelled</div>
                                <div *ngSwitchCase="'postponed'" class="detail-status mx-auto p-1"
                                    style="background-color: orange;">Postponed</div>
                                <div *ngSwitchCase="'rescheduled'" class="detail-status mx-auto p-1"
                                    style="background-color: orange;">Rescheduled</div>
                            </div>
                        </div>
                        <div *ngIf="eventDetails.url!=''" class="my-3 mx-auto detail-container">
                            <div class="detail-label h5">Buy Ticket At:</div>
                            <a href="{{eventDetails.url}}" target="_blank">Ticketmaster</a>
                        </div>
                    </div>
                    <div class="col-sm align-self-center" *ngIf="eventDetails.seatMapUrl!=''">
                        <img class="mw-100 mh-100" src="{{eventDetails.seatMapUrl}}">
                    </div>
                </div>
                <div *ngIf="eventLoaded && eventDetails.url!=''" class="mx-auto" style="width: fit-content;">
                    <span style="color: white">Share on: </span>
                    <a href="https://twitter.com/intent/tweet?text=Check {{stringToUrlComponent(eventDetails.name)}} on Ticketmaster. {{eventDetails.url}}&hashtags=hashtag1,hashtag2"
                        target="_blank" class="m-1"><i class="fa-brands fa-twitter fa-2x"
                            style="color: #00acee;"></i></a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{eventDetails.url}}&amp;src=sdkpreparse"
                        target="_blank" class="m-1"><i class="fa-brands fa-square-facebook fa-2x"
                            style="color: #4267B2;"></i></a>
                </div>
            </mat-tab>
            <mat-tab label="Artist/Teams">
                <app-artist-detail *ngIf="eventLoaded" [artists]="eventDetails.musicArtists"></app-artist-detail>
            </mat-tab>
            <mat-tab label="Venue">
                <div class="no-results text-center mx-auto" *ngIf="venueLoaded && venueDetails.name === undefined">No venue details to show</div>
                <div *ngIf="venueLoaded && venueDetails.name !== undefined">
                    <div class="row m-0 p-3" >
                        <div class="col-sm"
                            *ngIf="venueDetails.name!='' || venueDetails.address!='' || venueDetails.phoneNumber!=''">
                            <div class="my-3 mx-auto detail-container" *ngIf="venueDetails.name!=''">
                                <div class="detail-label h5">Name</div>
                                <div class="detail-content">{{venueDetails.name}}</div>
                            </div>
                            <div class="my-3 mx-auto detail-container" *ngIf="venueDetails.address!=''">
                                <div class="detail-label h5">Address</div>
                                <div class="detail-content">{{venueDetails.address}}</div>
                            </div>
                            <div class="my-3 mx-auto detail-container" *ngIf="venueDetails.phoneNumber!=''">
                                <div class="detail-label h5">Phone Number</div>
                                <div class="detail-content">{{venueDetails.phoneNumber}}</div>
                            </div>
                        </div>
                        <div class="col-sm"
                            *ngIf="venueDetails.openHours!='' || venueDetails.generalRule!='' || venueDetails.childRule!=''">
                            <div class="my-3 mx-auto detail-container" *ngIf="venueDetails.openHours!=''">
                                <div class="detail-label h5">Open Hours</div>
                                <div class="detail-content hide" [class.show]="showOpenHours" #content1>{{venueDetails.openHours}}
                                </div>
                                <div *ngIf="showOpenHours || (!showOpenHours && content1.scrollHeight > content1.clientHeight+2)">
                                    <div *ngIf="!showOpenHours" (click)="showOpenHours=true"
                                        class="show-link-container mx-auto">
                                        <span class="show-link">Show More</span><i
                                            class="material-icons show-link-arrow">keyboard_arrow_down</i>
                                    </div>
                                    <div *ngIf="showOpenHours" (click)="showOpenHours=false"
                                        class="show-link-container mx-auto">
                                        <span class="show-link">Show Less</span><i
                                            class="material-icons show-link-arrow">keyboard_arrow_up</i>
                                    </div>
                                </div>
                            </div>
                            <div class="my-3 mx-auto detail-container" *ngIf="venueDetails.generalRule!=''">
                                <div class="detail-label h5">General Rule</div>
                                <div class="detail-content hide" [class.show]="showGeneralRule" #content2>{{venueDetails.generalRule}}
                                </div>
                                <div *ngIf="showGeneralRule || (!showGeneralRule && content2.scrollHeight>content2.clientHeight+2)">
                                    <div *ngIf="!showGeneralRule" (click)="showGeneralRule=true"
                                        class="show-link-container mx-auto">
                                        <span class="show-link">Show More</span><i
                                            class="material-icons show-link-arrow">keyboard_arrow_down</i>
                                    </div>
                                    <div *ngIf="showGeneralRule" (click)="showGeneralRule=false"
                                        class="show-link-container mx-auto">
                                        <span class="show-link">Show Less</span><i
                                            class="material-icons show-link-arrow">keyboard_arrow_up</i>
                                    </div>
                                </div>
                            </div>
                            <div class="my-3 mx-auto detail-container" *ngIf="venueDetails.childRule!=''">
                                <div class="detail-label h5">Child Rule</div>
                                <div class="detail-content hide" [class.show]="showChildRule" #content3>{{venueDetails.childRule}}
                                </div>
                                <div *ngIf="showChildRule || (!showChildRule && content3.scrollHeight>content3.clientHeight+2)">
                                    <div *ngIf="!showChildRule" (click)="showChildRule=true"
                                        class="show-link-container mx-auto">
                                        <span class="show-link">Show More</span><i
                                            class="material-icons show-link-arrow">keyboard_arrow_down</i>
                                    </div>
                                    <div *ngIf="showChildRule" (click)="showChildRule=false"
                                        class="show-link-container mx-auto">
                                        <span class="show-link">Show Less</span><i
                                            class="material-icons show-link-arrow">keyboard_arrow_up</i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" *ngIf="venueDetails.address!=''" class="btn btn-danger mx-auto"
                        style="display: block;" (click)="openMap(venueDetails.address)">Show venue on Google map</button>
                </div>
            </mat-tab>
        </mat-tab-group>
    </div>
</div>