@(page: model.Page, mainPicture: String, ctaImage: Option[String], brandColour: String)(implicit request: RequestHeader, context: model.ApplicationContext)

@import conf.Static
@import play.api.Mode.Dev

<style amp-custom>
    @* TODO: these two stylesheets should be refactored into SCSS *@
    @if(page.metadata.isHosted) {
        @fragments.amp.stylesheets.hosted(mainPicture, ctaImage, brandColour)
    } else {
        @if(page.metadata.commercial.exists(_.isPaidContent)) {
            @fragments.amp.stylesheets.glabs()
        }
    }

    @* proper inlined AMP styles *@
    @if(page.metadata.isHosted) {
        @Html(common.Assets.css.hostedAmp)
    } else {
        @if(page.metadata.contentType.contains(model.DotcomContentType.LiveBlog)) {
            @Html(common.Assets.css.liveblogAmp)
        } else {
            @Html(common.Assets.css.amp)
        }
    }
</style>


@*
 * Please note that the tests will NOT pass validation with this line.
 * It won't affect prod but please comment out this line when running tests in DEV
 *@
@if(context.environment.mode == Dev) {
    @if(page.metadata.isHosted) {
        <link rel="stylesheet" id="head-css" data-reload="head.hosted-amp" type="text/css" href="@Static("stylesheets/head.hosted-amp.css")" />
    } else {
        @if(page.metadata.contentType.contains(model.DotcomContentType.LiveBlog)){
            <link rel="stylesheet" id="head-css" data-reload="head.amp-liveblog" type="text/css" href="@Static("stylesheets/head.amp-liveblog.css")" />
        } else {
            <link rel="stylesheet" id="head-css" data-reload="head.amp" type="text/css" href="@Static("stylesheets/head.amp.css")" />
        }
    }
}