@import model.ArticlePage
@(model: ArticlePage)(implicit request: RequestHeader, context: _root_.model.ApplicationContext)

@import views.html.fragments.langAttributes
@import common.LinkTo
@import views.BodyProcessor
@import views.support.Commercial.{isPaidContent, articleAsideOptionalSizes, shouldShowAds}
@import views.support.RenderClasses
@import views.support.TrailCssClasses.toneClass

@schemaType(page: ArticlePage) = @{page.article.metadata.schemaType}

@bodyType(page: ArticlePage) = @{
    if (page.article.tags.isReview) "reviewBody" else "articleBody"
}

@defining(model.article) { article =>
  @defining(isPaidContent(model)) { isPaidContent =>

    <div class="l-side-margins">
        <article id="article" data-test-id="article-root"

        class="@RenderClasses(Map(
            "has-feature-showcase-element" -> (article.tags.isFeature && article.elements.hasShowcaseMainElement),
            "paid-content" -> isPaidContent
        ),
            "content",
            "content--article",
            "tonal",
            s"tonal--${toneClass(article)}",
            s"content--pillar-${article.metadata.pillar.nameOrDefault}",
            s"section-${article.trail.sectionName.trim.toLowerCase.replaceAll("""[\s-]+""", "-")}"
        )"

        itemscope itemtype="@schemaType(model)" role="main">
            <meta itemprop="mainEntityOfPage" content="@LinkTo(article.metadata.url)">
            <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
                <meta itemprop="name" content="The Guardian">
                @fragments.logo()
            </div>

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

            @fragments.mainMedia(article)

            @fragments.headTonal(article, model, isPaidContent)

            <div class="content__main tonal__main tonal__main--@toneClass(article)">
                <div class="gs-container">
                    <div class="content__main-column content__main-column--article js-content-main-column @if(article.tags.isSudoku) {sudoku}">
                        <div class="js-score"></div>
                        <div class="js-sport-tabs football-tabs content__mobile-full-width"></div>

                        @fragments.contentMeta(article, model)

                        @if(article.tags.isNews && !article.elements.hasMainEmbed && (article.elements.elements("main") && article.elements.elements("main").isEmpty)) {
                            <hr class="content__hr hide-until-leftcol" />
                        }

                        <div class="content__article-body from-content-api js-article__body" itemprop="@bodyType(model)"
                            data-test-id="article-review-body" @langAttributes(article.content)>
                            @BodyProcessor(article)
                        </div>

                        @fragments.submeta(article)

                        <div class="after-article js-after-article"></div>
                    </div>

                    <div class="content__secondary-column js-secondary-column" aria-hidden="true">

                        @fragments.articleAsideSlot(
                            shouldShowAds(model),
                            articleAsideOptionalSizes(article.elements.hasShowcaseMainElement),
                            isSticky = !article.elements.hasShowcaseMainElement
                        )

                        @if(!isPaidContent){
                        <div class="js-components-container"></div>
                        }
                    </div>
                </div>
            </div>
        </article>

        @fragments.contentFooter(article, model.related, isPaidContent = isPaidContent)

    </div>
  }
}