{% load i18n %}
{% load wagtailcore_tags ocyanjson %}

{% with settings.cookie_jar.CookieSettings as cookie_settings %}
    {% if cookie_jar.needs_approval %}
        {% if cookie_jar.needs_display %}
        <div id="cookie_popup_body">
            <div class="container">
                <div class="row">
                    <div class="col-md-9">
                        <div id="cookie_popup_content">
                            {% if cookie_settings.cookie_message %}{{ cookie_settings.cookie_message|richtext }}{% endif %}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div id="cookie_buttons">
                            <div id="cookie_popup_acceptButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% trans 'Accept' %}</div>
                            <div data-toggle="modal" data-bs-toggle="modal" data-bs-target="#CookiesOptions" id="cookie_popup_settingsButton" data-backdrop="static" data-keyboard="false">{% trans 'Settings' %}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}


    <div class="modal fade" id="CookiesOptions" tabindex="-1" role="dialog" aria-labelledby="CookiesOptions" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <p class="h2 modal-title modal_cookie_header" id="CookiesOptions">{% trans 'Cookie settings' %}</p>
                </div>

                <div class="modal-body">

                    <div id="cookie_popup_content_modal">
                        {% if cookie_settings.popup_cookie_message %}{{ cookie_settings.popup_cookie_message|richtext }}{% endif %}
                    </div>

                    <div class="cookie_checkboxes">
                        <ul class="items">
                            <li>
                                <p class="h5 text-primary">{% trans 'Functional cookies' %}</p>
                                <label for="functional">
                                    <input type="checkbox" value="functional" name="functional" class="cookie_checkbox" disabled="disabled" checked="checked" id="functional">
                                    <span class="cookie_checkbox"></span>
                                    <div class="description">{% trans 'Cookies that ensure that this website functions properly, including access to protected parts of the website, as well as cookies for anonymous analysis.' %}</div>
                                </label>
                            </li>
                            <li>
                                <p class="h5 text-primary">{% trans 'Analytical cookies' %}</p>
                                <label for="analytical">
                                    <input type="checkbox" value="analytical" name="analytical" class="cookie_checkbox" checked="checked" id="analytical">
                                    <span class="cookie_checkbox"></span>
                                    <div class="description">{% trans 'Cookies that collect information so that we can measure the use of the website, enabling us to make the structure, navigation and content of the website as user-friendly as possible for you.' %}</div>
                                </label>
                            </li>
                            {% if cookie_jar.settings.social %}
                                <li>
                                    <p class="h5 text-primary">{% trans 'Social media cookies' %}</p>
                                    <label for="social">
                                        <input type="checkbox" value="social" name="social" class="cookie_checkbox" checked="checked" id="social">
                                        <span class="cookie_checkbox"></span>
                                        <div class="description">{% trans 'Cookies to share the content of our website via Social Media. Social media networks do profiling and tracking of visitors. By accepting these cookies your internet behavior can be monitored by social media.' %}</div>
                                    </label>
                                </li>
                            {% endif %}
                            {% if cookie_jar.settings.marketing %}
                                <li>
                                    <p class="h5 text-primary">{% trans 'Marketing cookies'%}</p>
                                    <label for="marketing">
                                        <input type="checkbox" value="marketing" name="marketing" class="cookie_checkbox" checked="checked" id="marketing">
                                        <span class="cookie_checkbox"></span>
                                        <div class="description">{% trans 'Cookies with which advertisements can be tailored to your internet behavior. By accepting these cookies your internet behavior can be monitored by advertising networks.' %}</div>
                                    </label>
                                </li>
                            {% endif %}
                        </ul>
                    </div>
                </div>

                <div class="modal-footer" data-cookie-key="{{ cookie_jar.cookie_key }}" id="cookie_model_saveButton">
                    <button type="button"  data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close" class="btn  btn-primary">
                        {% trans 'Save and accept' %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endwith %}