{% macro collapsible_panel(id, title, is_open=False) %}
<link rel="stylesheet" href="{{ url_for('static', filename='components/collapsible_panel.css') }}">

<div class="collapsible-panel" data-panel-id="{{ id }}">
    <button class="panel-header"
            type="button"
            onclick="togglePanel('{{ id }}')"
            aria-label="{{ title }}"
            aria-expanded="{{ 'true' if is_open else 'false' }}">
        <span class="panel-title">{{ title }}</span>
        <svg class="panel-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
    </button>
    <div class="panel-content" {% if not is_open %}style="display: none;"{% endif %}>
        <div class="panel-body">
            {{ caller() }}
        </div>
    </div>
</div>
{% endmacro %}