{% macro onsDetailsPanel(params) %}
    {% set openText = params.openText | default("Show detail") %}
    {% set closeText = params.closeText | default("Hide detail") %}

    <details class="ons-details-panel" {% if params.open %}{{ ' ' }}data-open{% endif %}>
        <summary class="ons-details-panel__banner ons-u-pt-s ons-u-pb-s">
            <span class="ons-container ons-details-panel__banner-contents">
                <span class="ons-details-panel__info-icon ons-u-mr-2xs" aria-hidden="true">i</span>
                <span class="ons-details-panel__banner-body">
                    {% set titleTag = params.headingLevel | default(2) %}
                    {% set openingTag = "<h" ~ titleTag %}
                    {% set closingTag = "</h" ~ titleTag ~ ">" %}
                    {{ openingTag | safe }}
                    class="ons-details-panel__banner-title ons-u-fs-m ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }}
                    <span class="ons-details-panel__banner-detail">
                        <span class="ons-details-panel__banner-detail-icon ons-u-mr-3xs">
                            {% from "components/icon/_macro.njk" import onsIcon %}
                            {{
                                onsIcon({
                                    "iconType": "chevron"
                                })
                            }}
                        </span>
                        <span class="ons-details-panel__banner-detail-title">
                            <span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
                            <span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
                        </span>
                    </span>
                </span>
            </span>
        </summary>
        <dl class="ons-container ons-details-panel__content ons-u-p-l">
            {% for item in params.detailsItems %}
                <div class="ons-details-panel__item ons-u-pb-xl ons-u-mb-l ons-u-ml-2xs">
                    <dt class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">
                        <h3 class="ons-details-panel__content-heading ons-u-fs-r--b ons-u-mb-no">{{ item.text }}</h3>
                        <time class="ons-details-panel__content-date" datetime="{{ item.date.iso }}">{{ item.date.short }}</time>
                    </dt>
                    <dd class="ons-details-panel__content-description">
                        <div class="ons-details-panel__content-text ons-u-mb-s">{{ item.description | safe }}</div>
                        {% if item.url or item.text == 'Content' %}
                            <a
                                class="ons-details-panel__content-url"
                                href="{{ item.url }}"
                                {% if item.urlAriaLabel %}aria-label="{{ item.urlAriaLabel }}"{% endif %}
                            >
                                {{ item.urlText | default("View superseded version") }}
                            </a>
                        {% endif %}
                    </dd>
                </div>
            {% endfor %}
        </dl>
    </details>
{% endmacro %}