{# templates/collapsible.html #}
{% if collapsible.header|striptags|trim != "" %}
    <!-- Normal clickable collapsible -->
    <details {% if collapsible.is_open %}open{% endif %}
             class="{% if collapsible.is_light %}light-collapsible{% else %}collapsible{% endif %}"
             {% for attr, value in (collapsible.data_attrs or {}).items() %}
                 data-{{ attr }}="{{ value }}"
             {% endfor %}>
        <summary style="background-color: {% if collapsible.is_light %}transparent{% else %}#444{% endif %};
                        color: {% if collapsible.header_color %}{{ collapsible.header_color }}{% elif collapsible.is_light %}inherit{% else %}white{% endif %};
                        {% if collapsible.summary_size %}font-size: {{ collapsible.summary_size }};{% endif %}">
            {{ collapsible.summary_prefix_html | safe }}
            {% if collapsible.summary_as_header %}
                <h{{ collapsible.header_level }} style="color: {{ collapsible.header_color }} !important; margin:0; display:inline;">
                    {{ collapsible.header | safe }}
                </h{{ collapsible.header_level }}>
            {% else %}
                {{ collapsible.header | safe }}
            {% endif %}
            {{ collapsible.summary_suffix_html | safe }}
        </summary>
        <div style="margin-left: 5px !important;">
            {{ collapsible.content_prefix_html | safe }}
            {{ collapsible.content | safe }}
        </div>
    </details>

{% else %}
    <!-- Static block when there is no header at all – looks the same but no arrow and not collapsible -->
    <div class="{% if collapsible.is_light %}light-collapsible{% else %}collapsible{% endif %}"
         {% for attr, value in (collapsible.data_attrs or {}).items() %}
             data-{{ attr }}="{{ value }}"
         {% endfor %}
         style="border-radius: 4px !important; overflow:hidden; margin: 6px 0 !important;">
        <div style="background-color: {% if collapsible.is_light %}transparent{% else %}#444{% endif %};
                    color: {% if collapsible.header_color %}{{ collapsible.header_color }}{% elif collapsible.is_light %}inherit{% else %}white{% endif %};
                    padding: 8px 12px;
                    {% if collapsible.summary_size %}font-size: {{ collapsible.summary_size }};{% endif %}">
            {{ collapsible.summary_prefix_html | safe }}
            {{ collapsible.summary_suffix_html | safe }}
        </div>
        <div style="padding: 10px 15px;
                    margin-left: 5px !important;
                    background-color: {% if collapsible.is_light %}transparent{% else %}#333{% endif %};
                    color: {% if collapsible.is_light %}inherit{% else %}#ddd{% endif %};">
            {{ collapsible.content_prefix_html | safe }}
            {{ collapsible.content | safe }}
        </div>
    </div>
{% endif %}