{@inject-html}
<a name="{{id}}"></a>
<div class="anchor-container">
    <a class="anchor-button-overlay anchor-button" title="Copy link to clipboard"
       onmouseenter="fixHref(this, '{{id}}');"
       onclick="fixHref(this, '{{id}}'); copyStringToClipboard(this.href);"
       href="#">
        <i class="material-icons copy-image">link</i>
    </a>
</div>
<div class="snippet-buttons">
    <script>var visibleSnippet{{serial}} = "longSnippet{{serial}}";</script>
    <button id="longSnippet{{serial}}Button"
            onclick="visibleSnippet{{serial}} = showSnippet('longSnippet{{serial}}', visibleSnippet{{serial}});"
            selected>
        Interactive App
    </button>
    <button id="shortSnippet{{serial}}Button"
            onclick="visibleSnippet{{serial}} = showSnippet('shortSnippet{{serial}}', visibleSnippet{{serial}});">
        Sample code
    </button>
</div>
<div class="snippet-container">
    <div class="snippet" id="longSnippet{{serial}}">
        <iframe class="snippet-dartpad" src="https://dartpad.dev/embed-flutter.html?split=60&run=true&sample_id={{id}}"></iframe>
    </div>
    <div class="snippet" id="shortSnippet{{serial}}" hidden>
        {{description}}
        <div class="copyable-container">
            <button class="copy-button-overlay copy-button" title="Copy to clipboard"
                    onclick="copyTextToClipboard(visibleSnippet{{serial}});">
                <i class="material-icons copy-image">assignment</i>
            </button>
            <pre class="language-{{language}}"><code class="language-{{language}}">{{code}}</code></pre>
        </div>
    </div>
</div>
{@end-inject-html}