@import play.filters.csrf.CSRF.Token
@(viewerUrl: String, actualUrl: String, previewEnv: String, composerUrl: String, proxyBase: String, path: String, googleTrackingId: String, csrfToken: Option[Token])

@main("Viewer", googleTrackingId) {
    <header class="fixed-header">
        <div class="top-toolbar">
            <div class="top-toolbar__logo">
                <a class="top-toolbar__logo-link" href="@composerUrl" title="Return to composer"></a>
            </div>

            <div class="top-toolbar__view-toolbar">
                <ul class="tool-bar">
                    <li class="top-toolbar__container">
                        @if(previewEnv == "preview") {
                            <div class="top-toolbar__status--@previewEnv">DRAFT</div>
                        } else {
                            <div class="top-toolbar__status--@previewEnv">@previewEnv</div>
                        }
                    <!--</li>-->
                    <li class="top-toolbar__container">
                        <div class="top-toolbar__label">Mobile web</div>
                        <div class="viewer-orientation">
                            <div class="viewer-orientation__button is-selected" data-switchmode="mobile-portrait"><i class="top-toolbar__icon--mobile-portrait"></i></div>
                            <div class="viewer-orientation__button" data-switchmode="mobile-landscape"><i class="top-toolbar__icon--mobile-landscape"></i></div>
                        </div>
                    <!--</li>-->
                    <li class="top-toolbar__button" data-app-preview="true">
                        <i class="top-toolbar__button--appApple"></i>
                        <i class="top-toolbar__button--appAndroid"></i>
                        Get app preview link
                    <!--</li>-->
                    @if(previewEnv == "preview") {
                        <li class="top-toolbar__button" data-redirect-preview="true">Having trouble? Try this<!--</li>-->
                        <li data-switchmode="social-share" class="top-toolbar__button is-always-visible"><i class="top-toolbar__icon--socialshare"></i>Social share<!--</li>-->
                        <li data-switchmode="reader" class="top-toolbar__button is-always-visible"><i class="top-toolbar__icon--copycheck"></i>Copy taste<!--</li>-->
                        <li class="top-toolbar__button--mobilecheck" data-toggledesktop="true"><i class="top-toolbar__icon--checkbox"></i>Mobile checked & verified<!--</li>-->
                        <li data-switchmode="desktop" class="top-toolbar__button--desktop"><i class="top-toolbar__icon--desktop"></i>Desktop<!--</li>-->
                        <li class="top-toolbar__button--blockads" data-toggleads="true"><i class="top-toolbar__icon--checkbox"></i>Block ads<!--</li>-->
                    } else {
                        <li data-switchmode="social-share" class="top-toolbar__button is-always-visible"><i class="top-toolbar__icon--socialshare"></i>Social share<!--</li>-->
                        <li data-switchmode="desktop" class="top-toolbar__button"><i class="top-toolbar__icon--desktop"></i>Desktop<!--</li>-->
                        <li class="top-toolbar__container"><a href="@actualUrl" class="top-toolbar__button"><i class="top-toolbar__icon--guardian"></i>View on theguardian.com</a><!--</li>-->
                    }

                    <li class="top-toolbar__button--right" data-print="true"><i class="top-toolbar__icon--printer"></i>Print version<!--</li>-->
                </ul>
            </div>
        </div>
        @if(previewEnv == "preview") {
            <div class="info-bar hide-desktop-enabled hide-reader-mode">To enable desktop preview you need to check and verify mobile first</div>
        }
        <div class="info-bar show-reader-mode">Copy taste presents you with a distraction free view of the article content. If you have any feedback please email the <a href="mailto:digitalcms.dev@@guardian.co.uk">Digital CMS</a> team</div>
        <div id="errorbar" class="error-bar"></div>
        <div id="messageBar" class="message-bar"></div>
    </header>



    <div class="content">
        <div class="viewers">
            <iframe id="viewer" class="viewer is-mobile-portrait" src="@viewerUrl#noads"></iframe>
        </div>
    </div>

    <script>
        window._baseAppUrl = '/@previewEnv';
        window._previewEnv = "@previewEnv";
        window._actualUrl = "@actualUrl";
        window._proxyBase = "@proxyBase";
        window._originalPath = "@path";
        @csrfToken.map { token =>
            window._csrfToken = {
                name: "@token.name",
                value: "@token.value"
            };
        }
    </script>
}