@import common.{LinkTo, Localisation}
@import layout.ContentWidths.MainMedia
@import model.Badges.badgeFor
@import model.ContentPage
@import views.support.RenderClasses
@import views.support.TrailCssClasses.toneClass
@import views.support.ImmersiveMainCleaner

@()(implicit page: ContentPage, request: RequestHeader, context: model.ApplicationContext)

@defining((
    page.item.tags.isTheMinuteArticle,
    page.item.elements.hasMainEmbed,
    page.item.fields.main.nonEmpty,
    page.item.tags.series.headOption,
    page.item.tags.isPaidContent
)) { case (isTheMinuteArticle, hasEmbed, hasMainMedia, optSeries, isPaidContent) =>
    <div class="@RenderClasses(Map(
            "content--minute-article" -> isTheMinuteArticle,
            "content--immersive-article-without-main-media" -> !hasMainMedia,
            "immersive-main-media" -> hasMainMedia
        ),
        "content", "content--immersive", "content--immersive-article", "tonal", s"tonal--${toneClass(page.item)}")
    ">
        <div class="gs-container immersive-main-media__logo">
            @if(isTheMinuteArticle) {
                @badgeFor(page.item).map { badge =>
                    <div class="badge-slot">
                        <a href="@LinkTo {/@badge.seriesTag}">
                            <img class="badge-slot__img" src="@badge.imageUrl" alt=""/>
                            <span class="u-h">View more @Localisation(page.item.content.sectionLabelName.getOrElse("")) articles</span>
                        </a>
                    </div>
                }
            }

        </div>
        <div class="immersive-main-media__media">
            @if(page.item.elements.hasMainPicture) {
                @page.item.elements.mainPicture.map(_.images).orElse(page.item.trail.trailPicture).map { picture =>
                    @fragments.image(
                        picture = picture,
                        classes = Seq("immersive-main-media__media"),
                        widths = MainMedia.immersive,
                        imageAltText = "",
                        isImmersiveMainMedia = true
                    )
                }
            } else {
                @if(hasMainMedia) {
                    <div class="immersive-main-media__media__loading">
                        <div class="immersive-main-media__loading-animation is-updating"></div>
                        <span class="u-h">Loading header</span>
                    </div>
                    @page.item match {
                        case article: model.Article => {
                            @ImmersiveMainCleaner(article, article.fields.main)
                        }
                        case content => {
                            @Html(content.fields.main)
                        }
                    }
                }
            }
        </div>


        @if(isTheMinuteArticle) {
            <div class="content--minute-article--overlay"></div>
        }

        <div class="@RenderClasses(Map(
                "immersive-main-media__headline-container--dark" -> (!isTheMinuteArticle && hasMainMedia),
                "immersive-main-media__headline-container" -> hasMainMedia
            ))
        ">
            <div class="gs-container">
                @if(!isTheMinuteArticle) {
                    <div class="content__main-column">
                      @fragments.meta.metaInline(page.item)
                }

                <h1 class="@RenderClasses(Map(
                        "content__headline--minute" -> isTheMinuteArticle,
                        "content__headline--immersive--with-main-media" -> hasMainMedia,
                        "content__headline--advertisement" -> isPaidContent
                    ), "content__headline", "content__headline--immersive", "content__headline--immersive-article")
                ">
                    @if(isTheMinuteArticle) {
                        @optSeries.map { series =>
                            <a href="@LinkTo { /@series.id }" class="logo--minute-article">
                                <span class="u-h">The Minute - </span>
                                @fragments.inlineSvg("minute-logo", "logo")
                            </a>
                        }.getOrElse {
                            <div class="logo--minute-article">
                                <span class="u-h">The Minute - </span>
                                @fragments.inlineSvg("minute-logo", "logo")
                            </div>
                        }
                    }
                    @Html(page.item.trail.headline)
                </h1>

                @if(isTheMinuteArticle) {

                    @if(page.item.trail.shouldHidePublicationDate) {
                        @fragments.meta.dateline(page.item.trail.webPublicationDate, page.item.fields.lastModified, page.item.content.hasBeenModified, page.item.fields.firstPublicationDate, page.item.tags.isLiveBlog, page.item.fields.isLive, isTheMinuteArticle)
                    }

                    @if(page.item.fields.standfirst.isDefined) {
                        @fragments.standfirst(page.item)
                    }
                }

                @if(!isTheMinuteArticle && page.item.fields.standfirst.isDefined) {
                    <div class="hide-on-mobile">
                        @fragments.standfirst(page.item)
                    </div>
                }

                @if(!isTheMinuteArticle) { </div> }
            </div>
        </div>
    </div>
    @if(page.item.fields.standfirst.isDefined && !isTheMinuteArticle) {
        <div class="content__wrapper--standfirst mobile-only">
            @fragments.standfirst(page.item)
        </div>
    }
}