@import common.LinkTo
@import model.{MediaPage, Video, VideoPlayer}
@import views.support.Commercial.{isAdFree, isPaidContent}
@import views.support.TrailCssClasses.toneClass
@import views.support.{RenderClasses, SeoOptimisedContentImage, StripHtmlTags, Video640}

@(page: MediaPage, displayCaption: Boolean)(implicit request: RequestHeader, context: model.ApplicationContext)

@defining(page.media, "video") { case (media, mediaType) =>
    @defining(isPaidContent(page), isAdFree(request)) { case (isPaidContent, isAdFree) =>
        <div class="l-side-margins @if(!isPaidContent) {l-side-margins--media} @if(isPaidContent) {l-side-margins--paidfor}">

            <article id="article" class="@RenderClasses(
                Map(
                    "content--has-body" -> media.fields.body.nonEmpty,
                    "content--paid-content paid-content" -> isPaidContent,
                    "content--pillar-special-report" -> (toneClass(media) == "tone-special-report"),
                    "vertical-video" -> page.media.tags.isVerticalVideo
                ),
                "content", "content--media", s"content--pillar-${media.metadata.pillar.nameOrDefault}", s"content--media--$mediaType", "tonal", "tonal--tone-media", s"tonal--${toneClass(media)}"
            )"
            itemscope itemtype="@media.metadata.schemaType" role="main">

                @if(!page.metadata.isFront && page.metadata.hasSurveyAd(request)) {
                    @fragments.commercial.survey()
                }

                @if(isPaidContent) {
                    @fragments.guBand()
                }

                @fragments.headTonal(media, page)
                <div class="content__main tonal__main tonal__main--@toneClass(media)">
                    <div class="gs-container">
                        <div class="content__main-column content__main-column--media content__main-column--@mediaType">
                            <div class="media-body">

                                <div class="media-primary player">
                                @media match {
                                    case video: Video => {
                                        <figure data-component="main video">
                                            <meta itemprop="name" content="@Html(video.trail.headline)"/>
                                            <meta itemprop="headline" content="@Html(video.trail.headline)"/>
                                            <meta itemprop="url" content="@LinkTo(video.metadata.url)"/>
                                            @video.fields.trailText.map { t =>
                                                <meta itemprop="description" content="@StripHtmlTags(t)" />
                                                <meta itemprop="about" content="@StripHtmlTags(t)" />
                                            }

                                            <meta itemprop="datePublished" content="@video.trail.webPublicationDate.toString("yyyy-MM-dd")" />
                                            <meta itemprop="name" content="@video.metadata.webTitle" />
                                            <meta itemprop="uploadDate" content="@video.trail.webPublicationDate.toString("yyyy-MM-dd")" />

                                            @video.mediaAtom.map { ma =>
                                                @ma.duration.map { duration =>
                                                    <meta itemprop="duration" content="@ma.isoDuration" />
                                                }
                                            }


                                            @video.elements.mainVideo.map { mv =>
                                                <meta itemprop="duration" content="@mv.videos.ISOduration" />
                                                <meta itemprop="height" content="@mv.videos.height" />
                                                <meta itemprop="width" content="@mv.videos.width" />
                                            }
                                            <meta itemprop="requiresSubscription" content="false" />
                                            @video.sixteenByNineMetaImage.map{ i =>
                                                    <meta itemprop="image" content="@i" />
                                                }

                                            @defining(video.elements.thumbnail.map(_.images) orElse video.mediaAtom.flatMap(_.posterImage)) {bestThumbnail =>
                                                @bestThumbnail.map { thumbnail =>
                                             <meta itemprop="thumbnail" content="@SeoOptimisedContentImage.bestSrcFor(thumbnail)" />
                                             <meta itemprop="thumbnailUrl" content="@SeoOptimisedContentImage.bestSrcFor(thumbnail)" />
                                                }
                                            }

                                            @video.mediaAtom.map { mediaAtom =>
                                                @fragments.atoms.media(mediaAtom, displayCaption = displayCaption, mediaWrapper = None, posterImageOverride = None, isVerticalVideo=page.media.tags.isVerticalVideo)
                                            }

                                            @video.elements.mainVideo.map { videoElement =>
                                                @fragments.media.video(
                                                    VideoPlayer(
                                                        videoElement,
                                                        Video640,
                                                        video.trail.headline,
                                                        autoPlay = true,
                                                        showControlsAtStart = true,
                                                        path = Some(video.metadata.id),
                                                        overrideIsRatioHd = None
                                                    ), enhance = true
                                                )
                                            }
                                        </figure>
                                    }
                                    case _ => {}
                                }
                                </div>

                                @if(!page.media.tags.isVerticalVideo) {
                                    <div class="content__main-column__body" data-component="body">
                                        @media match {
                                            case v: Video => {
                                                <div class="tonal__standfirst">
                                                @fragments.standfirst(v)
                                                </div>
                                            }
                                            case _ => {}
                                        }
                                        @fragments.contentMeta(media, page)
                                        @fragments.submeta(media)
                                    </div>
                                } else {
                                    @media match {
                                        case v: Video => {
                                                <div class="content__main-column__body" data-component="body">
                                                <div class="tonal__standfirst">
                                                @fragments.standfirst(v)
                                                </div>
                                            </div>
                                            }
                                            case _ => {}
                                        }
                                            @fragments.contentMeta(media, page)
                                            @fragments.submeta(media)
                                }
                            </div>
                        </div>
                        @media match {
                            case v: Video if !isPaidContent => {
                                <div class="content__secondary-column content__secondary-column--media content__secondary-column--video hide-on-childrens-books-site"
                                aria-hidden="true">
                                    <div class="js-video-components-container"></div>
                                </div>
                            }
                            case _ => {}
                        }
                    </div>
                </div>
            </article>

            @if(mediaType != "video" && mediaType != "audio" && isPaidContent) {
                <div class="fc-container fc-container--media">
                    <div class="js-media-popular tonal--@toneClass(media)">
                        <div class="fc-container fc-container--popular">
                            <div class="fc-container__inner">
                                <div class="fc-container__header">
                                    <h2 class="fc-container__header__title">
                                        <a class="most-viewed-no-js tone-colour" href="@LinkTo {/@mediaType/most-viewed}" data-link-name="Most viewed @mediaType">
                                            More @mediaType</a>
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>

        <div class="l-side-margins">
        @fragments.contentFooter(media, page.related, "media", isPaidContent)
        </div>
    }
}