{% load static wagtailcodeblock_tags %}
{% spaceless %}
    {% load_prism_css %}
    {% for key, val in self.items %}
        {% if key == "language" %}
            <script>
            /* This is ugly, but to ensure we only create this function once, and only call
            each JS library once, we need to check here in case there are multiple Wagtail
            blocks on this page. This will ensure we only load the minimum payload. */
            if(typeof loadPrismLanguage != 'function') {
                window.loadPrismLanguage = function(language) {
                    var libraries = [
                        {
                            "id": "code-block-prismjs",
                            "url": "//cdnjs.cloudflare.com/ajax/libs/prism/{% prism_version %}/prism.min.js"
                        },
                        {
                            "id": "code-block-prismjs-" + language,
                            "url": "//cdnjs.cloudflare.com/ajax/libs/prism/{% prism_version %}/components/prism-" + language + ".min.js"
                        }
                        {% line_numbers_js %}
                        {% toolbar_js %}
                        {% copy_to_clipboard_js %}
                    ];

                    for(const library of libraries) {
                        if(document.getElementById(library["id"]) == null) {
                            var s = document.createElement("script");
                            s.id = library["id"];
                            s.type = "text/javascript";
                            s.src = library["url"];
                            s.async = false;
                            document.body.appendChild(s);
                        }
                    }
                };
            }

            loadPrismLanguage('{{ val }}');

            language_class_name = 'language-{{ val }}';
            </script>
        {% endif %}
        {% if key == "code" %}
            <pre class="line-numbers">
                <code id="target-element-current">{{ val }}</code>
            </pre>
            <script>
                var block_num = (typeof block_num === 'undefined') ? 0 : block_num;
                block_num++;
                document.getElementById('target-element-current').className = language_class_name;
                document.getElementById('target-element-current').id = 'target-element-' + block_num;
            </script>
        {% endif %}
    {% endfor %}
{% endspaceless %}