{% macro onsPanel(params) %}

    {% if params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params.title is not defined and params.variant != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params.variant %}
        {% set variantClass = ' ons-panel--' + params.variant %}
    {% else %}
        {% set variantClass = ' ons-panel--info' %}
    {% endif %}

    {% if params.variant == "warn-branded" %}
        {% set containerClass = 'ons-branded-warning' %}
    {% endif %}

    {% if params.variant == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% set panel %}
        <div
            {% if (params.variant == 'error' and params.title) or params.variant == 'success' %}
                aria-labelledby="alert" role="alert" tabindex="-1" {% if not isDesignSystemExample %}autofocus="autofocus"{% endif %}
            {% endif %}class="ons-panel{{ variantClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"
            {% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}{% if params and params.id %}id="{{ params.id }}"{% endif %}
        >
            {% if params.variant == "warn" or params.variant == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params.variant == "announcement" %}
                {% from "components/icon/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{-
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    -}}
                </span>
                <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params.title and (params.variant not in ['bare', 'warn', 'warn-branded', 'announcement'] ) %}
                {% if params.variant == 'error' %}
                    {% set defaultTitleTag = "h" ~ 2 %}
                {% else %}
                    {% set defaultTitleTag = "div" %}
                {% endif %}
                {% set headingLevel = "h" ~ params.headingLevel if params.headingLevel else undefined %}
                {% set titleTag = headingLevel | default(defaultTitleTag) %}
                {% set openingTag = "<" ~ titleTag %}
                {% set closingTag = "</" ~ titleTag ~ ">" %}
                <div class="ons-panel__header">
                    {{ openingTag | safe }} id="alert"{% if params.variant %}data-qa="{{ params.variant }}-header"{% endif %}
                    class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}{{ closingTag | safe }}
                </div>
            {% else %}
                {% if not params.variant or params.variant == "branded" or params.variant == "info" or params.variant == "bare" %}
                    <span class="ons-panel__assistive-text ons-u-vh"
                        >{{ params.assistiveTextPrefix | default("Important information: ") }}</span
                    >
                {% elif params.variant == 'error' or params.variant == 'success' or params.variant == 'pending' %}
                    {% if params.variant == "success" %}
                        {% set defaultText = "Completed" %}
                    {% elif params.variant == "pending" %}
                        {% set defaultText = "Pending" %}
                    {% else %}
                        {% set defaultText = "Error" %}
                    {% endif %}
                    <span {% if params.variant == "success" %}id="alert"{% endif %}class="ons-panel__assistive-text ons-u-vh"
                        >{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span
                    >
                {% endif %}
            {% endif %}

            {% if params.iconType %}
                {% from "components/icon/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                    {{-
                        onsIcon({
                            "iconType": params.iconType,
                            "iconSize": params.iconSize
                        })
                    -}}
                </span>
            {% endif %}

            <div class="ons-panel__body{% if params.iconSize %}{{ ' ' }}ons-icon-margin--{{ params.iconSize }}{% endif %}">
                {{ (params.body if params) | safe }}
                {{ caller() if caller }}
            </div>
        </div>
    {% endset %}

    {% if params.variant == "warn-branded" or params.variant == "announcement" %}
        <div class="{{ containerClass }}">
            <div class="ons-container">{{ panel | safe }}</div>
        </div>
    {% else %}
        {{ panel | safe }}
    {% endif %}
{% endmacro %}