{% macro pricingSummary(selectors, content, subHeader, mssgs) %}
<aside class="govuk-grid-column-one-third payment-summary-wrap">
    {% for selector, load in selectors %}
    <div id="pricing-{{ selector }}" role="status" aria-atomic="true" class="payment-summary initially-hidden">
        <h2 class="govuk-heading-m">{{ mssgs.no_licence_req_body }}</h2>
        <p class="govuk-body-s">{{ subHeader }}</p>
        <dl>
            {% for k, v in load %}
                {% if content[k].desc %}
                    <div class="govuk-body pricing-summary-element-cost">
                        <dt>
                            <span>{{content[k].desc}}</span>
                        </dt>
                        <dd>
                            {% if v.cost === "0" %}
                                <strong>{{ mssgs.free }}</strong>
                            {% else %}
                                <strong>{{ mssgs.pound }}{{ v.cost }}</strong>
                            {% endif %}
                            {% if v.concessions %}
                                <div class="govuk-body-s pricing-summary-element-concession">
                                {{ mssgs.concession_applied }}
                                </div>
                            {% endif %}
                        </dd>
                    </div>
                {% endif %}
            {% endfor %}
        </dl>
        {% for k, v in load %}
            {% if k === 'msg' %}
                <div class="govuk-body-s pricing-summary-element-cost">
                    {{content[v]}}
                </div>
            {% endif %}
            {% if k === 'payment_msg' %}
                <div class="govuk-body-s pricing-summary-element-cost">
                    {{content[v]}}
                </div>
            {% endif %}
        {% endfor %}
    </div>
    {% endfor %}
</aside>
{% endmacro %}

{% macro pricingSummaryScript(selectors, nonce) %}
    <script nonce={{nonce}}>(function () {
        {% for selector, load in selectors %}
            if (document.getElementById('selector-{{ selector }}') && document.getElementById('selector-{{ selector }}').checked) {
                document.getElementById('pricing-{{ selector }}').style.display = 'block'
            } else {
                document.getElementById('pricing-{{ selector }}').style.display = 'none'
            }
            document.getElementById('selector-{{ selector }}').addEventListener('click', function () {
                {% for selector2, load in selectors %}
                    {% if selector !== selector2 %}
                        document.getElementById('pricing-{{ selector2 }}').style.display = 'none'
                    {% endif %}
                {% endfor %}
                document.getElementById('pricing-{{ selector }}').style.display = 'block'
            })
        {% endfor %}
    })()
    </script>
{% endmacro %}