{% set language = language|default('html') %}
{% set trim_space = (trim_space is null) ? true : trim_space %}
<div 
    class="flex flex-row items-center 
    {{ color|default('bg-gray-800') }}
    {{ class|default('w-full p-1 rounded-lg overflow-x-auto') }}">   
    <div class="flex-grow">
        {% if trim_space == true %}
            {% apply spaceless %}
            <pre><code 
                id="{{ component_id }}"
                language="{{ language }}"
                class="{{ code_class }} {{ language }}">{% autoescape false %}{{ content|escape }}{% endautoescape %}</code></pre>
            {% endapply %}
        {% else %}
            <pre><code 
                id="{{ component_id }}"
                language="{{ language }}"
                class="{{ code_class }} {{ language }}">{% autoescape false %}{{ content|escape }}{% endautoescape %}</code></pre>
        {% endif %}
    </div>
    {% if hide_copy != true %}  
        <div class="px-2">
            {{  component('tailwind~clipboard.copy',{ 
                    selector: '#' ~ component_id, 
                    type: 'element',
                    escape: true,
                    icon_color: icon_color|default('text-stone-200'),
                    class: copy_class|default('tooltip-left')
                }) 
            }}       
        </div>    
    {% endif %}
</div>