{# Code widget template #}
{% macro render_code(widget) %}
    <div class="code-block" id="{{ widget.widget_id }}">
        {% if widget.title %}
            <div class="code-title">
                <h5>{{ widget.title }}</h5>
            </div>
        {% endif %}

        <div class="code-container">
            <pre class="{{ widget.css_classes }}">
                <code class="{{ 'language-' + widget.language if widget.language else '' }}">{{ widget.code | escape }}</code>
            </pre>
        </div>

        {% if widget.language %}
            <div class="code-language">
                <small class="text-muted">{{ widget.language }}</small>
            </div>
        {% endif %}
    </div>

    {# Include highlight.js for syntax highlighting if not already included #}
    {% if widget.language %}
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', (event) => {
                document.querySelectorAll('pre code').forEach((el) => {
                    hljs.highlightElement(el);
                });
            });
        </script>
    {% endif %}
{% endmacro %}
