<section class="show-page">
    <div class="container">
        <div class="back-link visible-xs">
            <a href="$Parent.Link">$SVG('back-link-arrow').Size('17','14') Back to shows</a>
        </div>
        <div class="show-page-header">
            <% if $PresentedBy %>
                <p>{$PresentedBy}</p>
            <% end_if %>
            <h1><% if $BigTitle %>{$BigTitle}<% else %>{$Title}<% end_if %></h1>
            <% if $Subtitle || $SmallTitle %><h2 class="brand-pink"><% if $SmallTitle %>{$SmallTitle}<% else %>{$Subtitle}<% end_if %></h2><% end_if %>

            <% loop $ShowLocationInformation %>
                <div class="tabber-content tabber-$Pos<% if  $Location.Title == $Up.Locale.Title || $Up.LocationInformation.Count == 1 %> active<% end_if %>">
                    <% if $LocationInformation.FilteredURL %><a href="{$LocationInformation.FilteredURL}" class="btn btn-pink" target="_blank">Buy tickets</a><% end_if %>
                </div>
            <% end_loop %>

        </div>
        <% if $BannerImages.Count %>
            <div class="show-page-hero">
                <div class="swiper-container" id="swiper-slideshow">
                    <div class="swiper-wrapper">
                        <% loop $BannerImages %>
                            <div class="swiper-slide" style="background-image: url({$Link});"></div>
                        <% end_loop %>
                    </div>
                </div>
                <% if $Flags %>
                    <div class="show-page-flags">
                        <% loop $Flags %>
                            <img src="$Fill('64','32').URL" alt="$Title"/>
                        <% end_loop %>
                    </div>
                <% end_if %>
            </div>
        <% end_if %>
        <div class="row">
            <div class="col-sm-8">
                <div class="show-page-content well">
                    <% loop $LocationInformation %>
                        <div class="tabber-content tabber-$Pos<% if $Location.Title == $Up.Locale.Title || $Up.LocationInformation.Count == 1 %> active<% end_if %>">
                            <% if $Content %>
                                <p>{$Content}</p>
                            <% end_if %>
                        </div>
                    <% end_loop %>

                    <% if $YoutubeURL %>
                        <div id="video-player-container" class="video-player-container">
                            <div id="video-player"></div>
                            <div id="video-player-src" class="video-player-src">{$YouTubeCode}</div>
                            <div class="video-player-overlay"
                                 style="background-image: url(<% if $YouTubeImage %>$YouTubeImage.URL<% else %>'https://img.youtube.com/vi/{$YouTubeCode}/hqdefault.jpg'<% end_if %>);">
                                $SVG('video-play').Size('110','70')
                            </div>
                        </div>
                    <% end_if %>

                    <div class="social-share">
                        <p>Share this show</p>
                        <ul class="list-unstyled">
                            <li>
                                <a href="https://twitter.com/home?status={$AbsoluteLink}" target="_blank">
                                    <span class="sr-only">Share on Twitter</span>
                                    $SVG('twitter').Size('22','18')
                                </a>
                            </li>
                            <li>
                                <a href="https://www.facebook.com/sharer/sharer.php?u={$AbsoluteLink}" target="_blank">
                                    <span class="sr-only">Share on Facebook</span>
                                    $SVG('facebook').Size('11','20')
                                </a>
                            </li>
                            <li>
                                <a href="https://plus.google.com/share?url={$AbsoluteLink}" target="_blank">
                                    <span class="sr-only">Share on Google+</span>
                                    $SVG('google-plus').Size('21','21')
                                </a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/shareArticle?mini=true&url={$AbsoluteLink}&title={$Title}&summary=&source={$AbsoluteLink}"
                                   target="_blank">
                                    <span class="sr-only">Share on LinkedIn</span>
                                    $SVG('linkedin').Size('19','19')
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <% if $SortedSponsors %>
                    <div class="sponsors-unique well hidden-xs">
                        <h4>Sponsored by</h4>

                        <% loop $SortedSponsors %>
                            <% if $First %>
                            <div class="row sponsor-row">
                            <% end_if %>
                            <div class="col-sm-3">
                                <% if $Logo %>
                                    <div class="img-wrap">
                                        <img src="{$Logo.Fit('200', '200').URL}" alt="{$Title}">
                                    </div>
                                <% end_if %>
                            </div>
                            <% if $MultipleOf(4) || $Last %>
                            </div>
                            <% end_if %>
                            <% if $MultipleOf(4) && not $Last %>
                            <div class="row sponsor-row">
                            <% end_if %>
                        <% end_loop %>
                    </div>
                <% end_if %>
            </div>
            <div class="col-sm-4">
                <div class="show-buy-tickets">
                    <% loop $ShowLocationInformation %>
                        <div class="tabber-content tabber-$Pos<% if $Location.Title == $Up.Locale.Title || $Up.LocationInformation.Count == 1 %> active<% end_if %>">
                            <% if $LocationInformation.FilteredURL %><a href="{$LocationInformation.FilteredURL}" class="btn btn-pink" target="_blank">Buy tickets</a><% end_if %>
                        </div>
                    <% end_loop %>
                    <% if not $OnShortlist %>
                        <a href="#" class="shortlist-add ShortlistAddBtn" data-showid="$ID">
                            $SVG('shortlist-heart-add').Size('28','23') Add to Shortlist
                        </a>
                    <% else %>
                        <span class="shortlist-add">
                            <i class="fa fa-check brand-pink"></i> Added to Shortlist
                        </span>
                    <% end_if %>
                </div>
                <% if $ShowLocationInformation %>
                    <ul class="well-tab-triggers list-unstyled">
                        <% loop $ShowLocationInformation %>
                            <%-- TODO: fix this, add a class instead --%>
                            <li <% if $Up.ShowLocationInformation.count == 3 %>style="width:33%;overflow:hidden;"<% end_if %>>
                                <div data-tabber-toggle="tabber-$Pos" class="well-tab-trigger tabber-toggler<% if  $Location.Title == $Up.Locale.Title || $Up.LocationInformation.Count == 1 %> active<% end_if %>">{$Location.Title} Shows</div>
                            </li>
                        <% end_loop %>
                    </ul>
                <% end_if %>
                <% if $ShowLocationInformation %>
                    <% loop $ShowLocationInformation %>
                        <div class="tabber-content tabber-$Pos well well-sidebar well-tabs <% if  $Location.Title == $Up.Locale.Title || $Up.LocationInformation.Count == 1 %> active<% end_if %>">
                            <div class="well-content-dates">
                                <h4 class="well-subtitle small uppercase">Time &amp; date</h4>
                                <% loop $ShowSessions %>
                                    <p>{$Month}</p>
                                    <div class="row rp5">
                                        <% loop $Sessions %>
                                            <div class="col-xs-4 cp5">
                                                <div class="date-container<% if $TicketStatus != 'Normal' || $Status == 'Cancelled' %> has-ribbon<% end_if %>">
                                                <% if $Status == 'Cancelled' %>
                                                  <div class="date-container-ribbon">{$Status}</div>
                                                <% else_if $TicketStatus != 'Normal' %>
                                                  <div class="date-container-ribbon">{$TicketStatus}</div>
                                                    <% end_if %>
                                                    <div class="day">{$StartTime.FormatPHP('D')}</div>
                                                    <div class="date">{$StartTime.FormatPHP('d')}</div>
                                                    <div class="time">{$StartTime.FormatPHP('g:ia')}</div>
                                                </div>
                                            </div>
                                        <% end_loop %>
                                    </div>
                                <% end_loop %>
                            </div>
                            <div class="well-content-block">
                                <h4 class="well-subtitle small uppercase">
                                    Venue<% if $Venues.Count > 1 %>s<% end_if %>
                                </h4>

                                <p class="small">
                                    <% loop $Venues %>
                                        <% if $Pos > 1 %>
                                            <br/>
                                        <% end_if %>
                                        <a href="{$Link}" target="_blank">$Title</a>
                                    <% end_loop %>
                                </p>
                            </div>
                            <% if $LocationInformation && $LocationInformation.PricingTiers %>
                                <div class="well-content-block">
                                    <h4 class="well-subtitle small uppercase">Ticket prices</h4>
                                    <table>
                                        <tbody>
                                            <% loop $LocationInformation.PricingTiers %>
                                            <tr>
                                                <th>{$Title}</th>
                                                <td>{$Price}</td>
                                            </tr>
                                            <% end_loop %>
                                        </tbody>
                                    </table>
                                    <p>
                                        <small>*service fee may apply</small>
                                    </p>
                                </div>
                            <% end_if %>
                            <% if $Up.Duration %>
                                <div class="well-content-block">
                                    <h4 class="well-subtitle small uppercase">Duration</h4>
                                    <p class="small">
                                        {$Up.Duration}.<% if $Up.DurationNote %> <span class="note">{$Up.DurationNote}</span><% end_if %>
                                    </p>
                                </div>
                            <% end_if %>
                            <% if $LocationInformation.WheelchairText %>
                                <div class="well-content-block well-icon-block">
                                    $SVG('sidebar-wheelchair').Size('26','29')
                                    <p>{$LocationInformation.WheelchairText}</p>
                                </div>
                            <% end_if %>
                            <% if $LocationInformation.ExclamationMarkText %>
                                <div class="well-content-block well-icon-block">
                                    $SVG('sidebar-exclamation').Size('26','26')
                                    <p>{$LocationInformation.ExclamationMarkText}</p>
                                </div>
                            <% end_if %>
                            <% if $LocationInformation.R18Text %>
                                <div class="well-content-block well-icon-block">
                                    $SVG('sidebar-exclamation').Size('26','26')
                                    <p>{$LocationInformation.R18Text}</p>
                                </div>
                            <% end_if %>
                        </div>
                    <% end_loop %>
                <% end_if %>

                <% if $ShowLocationInformation %>
                <div class="show-buy-tickets">
                    <% loop $ShowLocationInformation %>
                        <div class="tabber-content tabber-$Pos<% if  $Location.Title == $Up.Locale.Title || $Up.LocationInformation.Count == 1 %> active<% end_if %>">
                            <% if $LocationInformation.FilteredURL %>
                                <a href="{$LocationInformation.FilteredURL}" class="btn btn-pink" target="_blank">Buy tickets</a>
                            <% end_if %>
                        </div>
                    <% end_loop %>
                    <% if not $OnShortlist %>
                        <a href="#" class="shortlist-add ShortlistAddBtn" data-showid="$ID">
                            $SVG('shortlist-heart-add').Size('28','23') Add to Shortlist
                        </a>
                    <% else %>
                        <span class="shortlist-add">
                            <i class="fa fa-check brand-pink"></i> Added to Shortlist
                        </span>
                    <% end_if %>
                </div>
              <% end_if %>
                <% if $SortedSponsors %>
                    <div class="sponsors-unique well visible-xs">
                        <h4>Sponsored by</h4>


                        <% loop $SortedSponsors %>
                            <% if $First %>
                                <div class="row sponsor-row">
                            <% end_if %>
                            <div class="col-xs-6">
                                <% if $Logo %>
                                    <div class="img-wrap">
                                        <img src="{$Logo.Fit('200', '200').URL}" alt="{$Title}">
                                    </div>
                                <% end_if %>
                            </div>
                            <% if $MultipleOf(2) || $Last %>
                                </div>
                            <% end_if %>
                            <% if $MultipleOf(2) && not $Last %>
                            <div class="row sponsor-row">
                            <% end_if %>
                        <% end_loop %>
                    </div>
                <% end_if %>

                <% if $MediaReleases %>
                    <div class="show-media-releases well well-sidebar hidden-xs">
                        <h3 class="well-title">Media releases</h3>
                        <% loop $MediaReleases %>
                            <div class="well-content-block">
                                <a class="media-release" href="$Document.URL" target="_blank">
                                    <span class="filename">$Title</span>
                                    <span class="filesize">$Document.Size $Document.Filetype</span>
                                    $SVG('media-release-download').Size('22','24')
                                </a>
                            </div>
                        <% end_loop %>
                    </div>
                <% end_if %>
            </div>
        </div>
    </div>
</section>

<% if $Reviews %>
    <section class="show-reviews">
        <div class="container">
            <h3>Reviews</h3>

            <div class="show-review-tiles">
                <div class="row">
                    <% loop $Reviews.Limit(6) %>
                        <div class="col-sm-4">
                            <div class="lg-modal show-review-tile" data-modal="#show-review-{$Pos}">
                            <% include ShowPageStarRating %>
                            <span class="review">
                                {$FeaturedQuote}
                            </span>
                                <span class="author">- {$ReviewerName}, <span>{$ReviewerTitle}</span></span>
                                <span class="review-expand"></span>
                            </div>
                            <div class="modal-wrap" id="show-review-{$Pos}" aria-hidden="true">
                                <div class="modal">
                                    <div class="modal-content">
                                        <h3 class="modal-quote">{$FeaturedQuote}</h3>

                                        <% include ShowPageStarRating %>

                                        <p>{$Review}</p>

                                        <p class="modal-quote-author">- {$ReviewerName}, <span>{$ReviewerTitle}</span>
                                        </p>

                                        <div class="modal-close">
                                            $SVG('modal-close').Size('21','21')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <% end_loop %>
                </div>
            </div>
        </div>
    </section>
<% end_if %>

<% if $RelatedShows %>
    <section class="grid-shows-container">
        <div class="container">
            <div class="grid-shows-title">
                <h2>You may also like</h2>
            </div>
            <div class="grid-shows">
                <% loop $LocationRelatedShows.Limit(6) %>
                    <% include ShowPreview %>
                <% end_loop %>
            </div>
        </div>
    </section>
<% end_if %>
