{{ define "main" }}

<main aria-role="main">
    <section class="hero">
        <div class="overlay">
            <h1>{{ .Title }}</h1>
            <article>
                {{ .Content }}
            </article>
        </div>
    </section>
</main>

<script>
    // For each highlighted block of code that's .language-html,
    //  log its code text.

    const createTryLinkFor = (highlightBox, codeEl) => {
        if (codeEl) {
            const cfLink = document.createElement('a');
            cfLink.classList.add('button');
            cfLink.classList.add('cfSampleLink');
            cfLink.href = `https:\/\/codeframe.co\/new?html=${encodeURIComponent(codeEl.textContent)}`;
            cfLink.target = '_blank';
            cfLink.textContent = 'Try this →';
            highlightBox.appendChild(cfLink);
        }
    }

    for (const highlightedEl of document.querySelectorAll('.highlight')) {
        const codeEl
            = highlightedEl.querySelector('td:last-child code.language-html')
            || highlightedEl.querySelector('td:last-child code.language-javascript');
        createTryLinkFor(highlightedEl, codeEl);
    }
</script>

{{ end }}
