---
import '../../styles/installationSection.scss'
import ShikiBlock from "../ShikiBlock.astro"
import StepHeader from '../StepHeader.astro'
import { docsUrl } from '../../data/metadata'

const pageExample = `<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@{{latest_release}}/dist/cookieconsent.css">
</head>
<body>
    <!-- ... your page ... -->

    <script type="module" src="cookieconsent-config.js"></script>
</body>
</html>`;

const scriptBefore = `<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>`;

const scriptAfter = `<script type="text/plain" data-category="analytics" async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>`;

const preferencesButton = `<button type="button" data-cc="show-preferencesModal">Cookie preferences</button>`;
---
<section class="step installation" id="get-the-code" aria-labelledby="step-install">
    <StepHeader
        number={5}
        title="Add it to your website"
        id="step-install"
        docSection="essential/getting-started.html#installation"
        docLabel="Installation documentation"
    >
        Four small changes to your page and your banner is live.
    </StepHeader>
    <div class="install-body">
        <ol class="install-steps">
            <li>
                <p>
                    Save your config as <code class="highlight--green">cookieconsent-config.js</code> next to your HTML page:
                    use <b>Copy</b> or <b>Download</b> on the config panel.
                </p>
            </li>
            <li>
                <p>Load the stylesheet in the <code>&lt;head&gt;</code> and your config at the end of the <code>&lt;body&gt;</code>:</p>
                <ShikiBlock lang="html" code={pageExample}/>
            </li>
            <li>
                <p>
                    Stop your scripts from running until the visitor agrees.
                    Change <code>type</code> to <code>"text/plain"</code> and add <code>data-category</code>
                    with the name of one of your categories:
                </p>
                <ShikiBlock lang="html" title="Before" code={scriptBefore}/>
                <ShikiBlock lang="html" title="After" code={scriptAfter}/>
                <p class="install-steps__note">
                    The script now runs only after the visitor accepts the <b>analytics</b> category.
                    <a href={`${docsUrl}/advanced/manage-scripts.html`} target="_blank" rel="noopener noreferrer">More about blocking scripts</a>
                    · for iframes (YouTube, maps…) use <a href={`${docsUrl}/advanced/iframemanager-setup.html`} target="_blank" rel="noopener noreferrer">iframemanager</a>.
                </p>
            </li>
            <li>
                <p>Let visitors change their choice later, for example from a link in your footer:</p>
                <ShikiBlock lang="html" code={preferencesButton}/>
                <p class="install-steps__note">
                    Any element with <code>data-cc="show-preferencesModal"</code> opens the preferences modal.
                    <a href={`${docsUrl}/advanced/custom-attribute.html#show-preferencesmodal`} target="_blank" rel="noopener noreferrer">More about this</a>
                </p>
            </li>
        </ol>
    </div>
</section>
