{% macro onsQuestion(params) %}

    {%- set titleHtml -%}
        {%- if params.readDescriptionFirst == true and params.description -%}
            <div class="ons-question__description ons-u-vh">{{- params.description | safe -}}</div>
            {{- ' ' -}}
        {%- endif -%}{{- params.title | safe -}}
    {%- endset -%}

    {%- set descHtml -%}
        {%- if params.readDescriptionFirst == true -%}
            <div
                aria-hidden="true"
                {% if params.legendIsQuestionTitle is not defined %}class="ons-question__description ons-question__description--aria-hidden"{% endif %}
            >
                {{- params.description | safe -}}
            </div>
        {% elif params.legendIsQuestionTitle is not defined %}
            <div class="ons-question__description ons-u-mb-l">{{- params.description | safe -}}</div>
        {% else %}
            {{- params.description | safe -}}
        {%- endif -%}
    {%- endset -%}

    {% set instHtml %}
        <div class="ons-question__instruction ons-u-mb-l">{{ params.instruction | safe }}</div>
    {% endset %}

    {% if params.definition %}
        {% set questionDefinition %}
            {% from "components/details/_macro.njk" import onsDetails %}
            {%
                call onsDetails({
                    "id": params.definition.id,
                    "classes": 'ons-u-mb-l',
                    "title": params.definition.title,
                    "headingAttributes": params.definition.headingAttributes,
                    "contentAttributes": params.definition.contentAttributes
                })
            %}
                {% if params.definition.content %}
                    {{ params.definition.content | safe }}
                {% endif %}
            {% endcall %}
        {% endset %}
    {% endif %}

    {% if params.guidance %}
        {% set questionGuidance %}
            {% from "components/panel/_macro.njk" import onsPanel %}
            {%
                call onsPanel({
                    "id": params.guidance.id,
                    "classes": "ons-question-guidance ons-u-mb-l",
                    "attributes": params.guidance.attributes
                })
            %}
                {% if params.guidance.content %}
                    {{ params.guidance.content | safe }}
                {% endif %}
                {% if params.guidance.lists %}
                    {%- for item in params.guidance.lists -%}
                        {% if item.listHeading %}
                            <h2 class="ons-question-guidance__list-heading ons-u-fs-r--b">{{ item.listHeading }}</h2>
                        {% endif %}
                        {% if item.listLeadingLine %}
                            <p class="ons-question-guidance__list-leading-line">{{ item.listLeadingLine }}</p>
                        {% endif %}
                        {% from "components/list/_macro.njk" import onsList %}
                        {{
                            onsList({
                                "itemsList": item.itemsList
                            })
                        }}
                    {%- endfor -%}
                {%- endif -%}
            {% endcall %}
        {% endset %}
    {% endif %}

    <div
        {% if params.id %}id="{{ params.id }}"{% endif %}
        class="ons-question ons-u-mb-xl{{ ' ' + params.classes if params.classes else '' }}"
        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
    >
        {% set additionalContent %}
            {% if params.warning %}
                {% from "components/panel/_macro.njk" import onsPanel %}
                {%
                    call onsPanel({
                        "id": params.warning.id,
                        "variant": "warn"
                    })
                %}
                    <p>{{ params.warning.body }}</p>
                {% endcall %}
            {% endif %}

            {% if params.instruction %}
                {{- instHtml | safe -}}
            {% endif %}

            {% if params.definition %}
                {{- questionDefinition | safe -}}
            {% endif %}

            {% if params.guidance %}
                {{- questionGuidance | safe -}}
            {% endif %}
        {% endset %}

        {% if params.legendIsQuestionTitle %}
            {% from "components/fieldset/_macro.njk" import onsFieldset %}

            {# Resolves caller issue in Jinja: https://github.com/pallets/jinja/issues/371 #}
            {% set content = caller() if caller %}
            <div class="ons-question__answer ons-u-mb-l">
                {%
                    call onsFieldset({
                        "legendIsQuestionTitle": params.legendIsQuestionTitle,
                        "legend": titleHtml,
                        "description": descHtml if params.description,
                        "legendClasses": params.legendClasses,
                        "legendTitleClasses": params.legendTitleClasses
                    })
                %}
                    {{- additionalContent | safe -}}
                    {{ content }}
                {% endcall %}
            </div>
        {% else %}
            <h1 id="question-title" class="ons-question__title">{{- titleHtml | safe -}}</h1>

            {% if params.description %}
                {{- descHtml | safe -}}
            {% endif %}

            {{- additionalContent | safe -}}

            <div class="ons-question__answer ons-u-mb-l">{{ caller() if caller }}</div>
        {% endif %}

        {% if params.justification %}
            {% from "components/details/_macro.njk" import onsDetails %}
            {%
                call onsDetails({
                    "id": params.justification.id,
                    "classes": 'ons-u-mb-l',
                    "title": params.justification.title | default('Why we ask this question'),
                    "headingAttributes": params.justification.headingAttributes,
                    "contentAttributes": params.justification.contentAttributes
                })
            %}
                {{ params.justification.content | safe }}
            {% endcall %}
        {% endif %}
    </div>

    {% if params.submitButton != (false or null) %}
        {% from "components/button/_macro.njk" import onsButton %}
        {{
            onsButton({
                "id": params.submitButton.id,
                "variants": params.submitButton.variants,
                "text": params.submitButton.text | default ('Save and continue'),
                "classes": params.submitButton.classes,
                "attributes": params.submitButton.attributes
            })
        }}
    {% endif %}
{% endmacro %}