{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}

{% block utilities_offcanvas_meta %}
    {% set isAjaxOffcanvas = true %}

    {{ parent() }}
{% endblock %}

{% block utilities_offcanvas_close_text %}
    {{ "cookie.headline"|trans|sw_sanitize }}
{% endblock %}

{% block utilities_offcanvas_content %}
    <div class="offcanvas-cookie">
        <div class="offcanvas-cookie-description">
            <p>
                {{ "cookie.messageText"|trans({
                    '%url%': path('frontend.cms.page', { id: config('core.basicInformation.privacyPage') })
                })|raw }}
            </p>

            <div class="row align-items-center h6 offcanvas-cookie-header">
                <div class="col">
                    {{ "cookie.configuration"|trans|sw_sanitize }}
                </div>
            </div>
        </div>

        <div class="offcanvas-cookie-list">
            {% for cookieGroup in cookieGroups %}
                {% sw_include '@Storefront/storefront/layout/cookie/cookie-configuration-group.html.twig' with {
                    themeIconConfig: themeIconConfig,
                    cookieGroup: cookieGroup
                } only %}
            {% endfor %}
        </div>

        {% if config('core.basicInformation.acceptAllCookies') %}
            {% block layout_cookie_configuration_allow_all_button %}
                <div class="d-grid mb-2">
                    <button
                        type="submit"
                        class="btn btn-primary btn-block js-offcanvas-cookie-accept-all">
                        {{ "cookie.acceptAll"|trans|sw_sanitize }}
                    </button>
                </div>
            {% endblock %}
        {% endif %}

        {% block layout_cookie_configuration_button %}
            <div class="d-grid">
                <button
                    type="submit"
                    class="btn btn-primary js-offcanvas-cookie-submit">
                    {{ "cookie.save"|trans|sw_sanitize }}
                </button>
            </div>
        {% endblock %}

    </div>
{% endblock %}
