{% macro onsCookiesBanner(params) %}
    {% from "components/button/_macro.njk" import onsButton %}

    {% if params.lang == 'cy' %}
        {% set ariaLabel = 'Cwcis' %}
        {% set serviceName = 'ons.gov.uk' %}
        {% set statementTitle = 'Cwcis ar' %}
        {% set settingsLinkText = 'Gweld cwcis' %}
        {% set acceptButtonText = 'Derbyn cwcis ychwanegol' %}
        {% set rejectButtonText = 'Gwrthod cwcis ychwanegol' %}
        {% set acceptedText = 'Rydych chi wedi derbyn yr holl gwcis ychwanegol.' %}
        {% set rejectedText = 'Rydych chi wedi gwrthod yr holl gwcis ychwanegol.' %}
        {% set confirmationButtonText = 'Cuddio' %}
        {% set contextSuffix = 'neges hon' %}
        {% set beforeLinkPreferencesUrl = 'Gallwch chi' %}
        {% set afterLinkPreferencesUrl = '"newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %}
        {% set beforeLinkStatementText = '<p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p><p>Hoffem osod' %}
        {% set afterLinkStatementText = 'cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>' %}
    {% else %}
        {% set ariaLabel = 'Cookies banner' %}
        {% set serviceName = 'ons.gov.uk' %}
        {% set statementTitle = 'Cookies on' %}
        {% set settingsLinkText = 'View cookies' %}
        {% set acceptButtonText = 'Accept additional cookies' %}
        {% set rejectButtonText = 'Reject additional cookies' %}
        {% set acceptedText = 'You have accepted all additional cookies.' %}
        {% set rejectedText = 'You have rejected all additional cookies.' %}
        {% set confirmationButtonText = 'Hide' %}
        {% set contextSuffix = 'cookie message' %}
        {% set beforeLinkPreferencesUrl = 'You can' %}
        {% set afterLinkPreferencesUrl = 'change your cookie preferences</a> at any time.' %}
        {% set beforeLinkStatementText = '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set' %}
        {% set afterLinkStatementText = 'additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>' %}
    {% endif %}

    {% if not isDesignSystemExample %}
        {% set settingsLinkUrl = params.settingsLinkUrl | default('/cookies') %}
    {% else %}
        {% set settingsLinkUrl = '#0' %}
    {% endif %}
    {% set statementText = beforeLinkStatementText + ' <a href="' + settingsLinkUrl + '">' + afterLinkStatementText %}
    {% set preferencesText = beforeLinkPreferencesUrl + ' <a href="' + settingsLinkUrl + '">' + afterLinkPreferencesUrl %}

    <section
        class="ons-cookies-banner"
        aria-label="{{ params.ariaLabel | default(ariaLabel) }}"
        {% if params.cookieDomainPolicy %}data-ons-cookie-domain-policy="{{ params.cookieDomainPolicy }}"{% endif %}
    >
        <div
            class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__primary"
        >
            <div class="ons-grid">
                <div class="ons-grid__col ons-col-8@m">
                    <h2 class="ons-cookies-banner__title ons-u-mb-2xs">
                        {{ params.statementTitle | default(statementTitle) }} {{ params.serviceName | default(serviceName) }}
                    </h2>
                    <div class="ons-cookies-banner__statement">{{ params.statementText | default(statementText) | safe }}</div>
                </div>
            </div>
            <div class="ons-grid ons-grid-flex ons-u-mt-s">
                <div class="ons-grid__col">
                    {{
                        onsButton({
                            "type": 'button',
                            "attributes": {
                                "data-button": 'accept'
                            },
                            "text": params.acceptButtonText | default(acceptButtonText),
                            "classes": 'ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn'
                        })
                    }}
                </div>
                <div class="ons-grid__col">
                    {{
                        onsButton({
                            "type": 'button',
                            "attributes": {
                                "data-button": 'reject'
                            },
                            "text": params.rejectButtonText | default(rejectButtonText),
                            "classes": 'ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn'
                        })
                    }}
                </div>
                <div class="ons-grid__col">
                    <a class="ons-cookies-banner__link" href="{{ settingsLinkUrl }}"
                        >{{ params.settingsLinkText | default(settingsLinkText) }}</a
                    >
                </div>
            </div>
        </div>
        <div
            class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__confirmation ons-u-d-no"
        >
            <div
                class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid--gutterless ons-grid-flex--no-wrap@s ons-grid-flex--vertical-center"
            >
                <div class="ons-grid__col ons-grid__col-flex ons-col-auto ons-u-flex-shrink@s">
                    <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s">
                        <span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span
                        ><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span
                        ><span class="ons-cookies-banner__preferences-text"
                            >{{ params.preferencesText | default(preferencesText) | safe }}</span
                        >
                    </p>
                </div>
                <div class="ons-grid__col">
                    {{
                        onsButton({
                            "type": 'button',
                            "text": params.confirmationButtonText | default(confirmationButtonText),
                            "buttonContext": params.contextSuffix | default(contextSuffix),
                            "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
                        })
                    }}
                </div>
            </div>
        </div>
    </section>
{% endmacro %}