{% if show %}
    <div id="cookies-bar" data-controller="cookies" class="p-4">
        <div class="basic-settings">
            <div class="row">
                <div class="col-12">
                    <p><strong>{{ 'cookies_title'|translate }}</strong></p>
                    <div class="close-icon" data-action="click->cookies#close">
                        <i class="fa-solid fa-xmark"></i>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-8 col-12">
                    {{ _self.aboutCookies() }}
                </div>
                <div class="col-sm-4 col-12">
                    <button class="btn btn-primary mb-2"
                            data-action="cookies#acceptAll">{{ 'cookies_button_all'|translate }}</button>
                    <button class="btn btn-primary mb-2"
                            data-action="cookies#acceptNecessary">{{ 'cookies_button_necessarily'|translate }}</button>
                    <button class="btn btn-light mb-2"
                            data-action="cookies#showAdvanceSettings">{{ 'cookies_button_settings'|translate }}</button>
                </div>
            </div>
        </div>
        <div class="advance-settings d-none">
            <div class="row">
                <div class="col-12">
                    <p><strong>{{ 'cookies_title_advance'|translate }}</strong></p>
                    <div class="close-icon" data-action="click->cookies#close">
                        <i class="fa-solid fa-xmark"></i>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <p><strong>{{ 'cookies_title_meaning'|translate }}</strong></p>
                    {{ _self.aboutCookies() }}
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="accordion" id="accordionExample">
                        {{ _self.accordionItem('cookies_according_user_data_title', 'cookies_according_user_data_description', 'userData', true) }}
                        {{ _self.accordionItem('cookies_according_analytics_title', 'cookies_according_analytics_description', 'analyticsStorage') }}
                        {{ _self.accordionItem('cookies_according_storage_title', 'cookies_according_storage_description', 'storage') }}
                        {{ _self.accordionItem('cookies_according_personalization_title', 'cookies_according_personalization_description', 'personalization') }}
                    </div>
                </div>
            </div>
            <div class="row pt-2">
                <div class="col-6">
                    <button class="btn btn-primary"
                            data-action="cookies#acceptAll">{{ 'cookies_button_all'|translate }}</button>
                </div>
                <div class="col-6 text-right">
                    <button class="btn btn-primary"
                            data-action="cookies#acceptChosen">{{ 'cookies_button_save'|translate }}</button>
                </div>
            </div>
        </div>
    </div>

    {% macro aboutCookies() %}
        <p>
            {{ 'cookies_about'|translate }}
        </p>
        <p>
            <a href="{{ path('cookies_declaration', {'_locale':  app.request.locale}) }}">{{ 'cookies_link_more'|translate }}</a>
        </p>
    {% endmacro %}

    {% macro accordionItem(name, text, checkboxName, isDisabled) %}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-action="cookies#toggleAccordion">
                    {{ name|translate }}

                    <div class="form-check form-switch">
                        <input name="{{ checkboxName }}" class="form-check-input" type="checkbox"
                               id="flexSwitchCheckChecked" {% if isDisabled %}disabled checked{% endif %}>
                    </div>
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse{# show #}" aria-labelledby="headingOne"
                 data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    {{ text|translate }}
                </div>
            </div>
        </div>
    {% endmacro %}
{% endif %}