{#
    LimeSurvey
    Copyright (C) 2007-2017 The LimeSurvey Project Team / Louis Gac
    All rights reserved.
    License: GNU/GPL License v2 or later, see LICENSE.php
    LimeSurvey is free software. This version may have been modified pursuant
    to the GNU General Public License, and as distributed it includes or
    is derivative of works licensed under the GNU General Public License or
    other free or open source software licenses.
    See COPYRIGHT.php for copyright notices and details.

    (¯`·._.·(¯`·._.· Privacy with modal ·._.·´¯)·._.·´¯)

    Show the privacy message and the data security message will be available in a modal

#}
{% set describedbyprivacy = "datasecurity_notice" %}
{% set privacychecked = "" %}
{% if getPost('datasecurity_accepted') %}
    {% set privacychecked = "checked" %}
{%endif %}
{% if aSurveyInfo.datasecurity_error %}
<div class="{{ aSurveyInfo.class.activealert }} alert alert-danger alert-dismissible alert-dismissible {% if not aSurveyInfo.datasecuritynotaccepted %}ls-js-hidden {% endif %}" {{ aSurveyInfo.attr.activealert }} id="datasecurity_error">
	<a {{ aSurveyInfo.attr.activealertbutton }} class="{{ aSurveyInfo.class.activealertbutton }} btn-close" aria-hidden="true"></a>
	{{ aSurveyInfo.datasecurity_error }}
</div>
	{% if aSurveyInfo.datasecuritynotaccepted %}
		{% set describedbyprivacy = "datasecurity_error " ~ describedbyprivacy %}
	{% endif %}
{% endif %}
<div class="form-check">
    <input required class="{{ aSurveyInfo.class.privacydataseccheckbox }} form-check-input" {{ privacychecked }} type="checkbox" name="datasecurity_accepted" id="datasecurity_accepted" aria-describedby="{{ describedbyprivacy }}"/>
    <label for="datasecurity_accepted" class="form-check-label fw-bold {{ aSurveyInfo.class.privacydataseccheckboxlabel }}">{{ aSurveyInfo.datasecurity_notice_label }}</label>
</div>
<div class="collapse fade mb-3" id="data-security-modal-{{aSurveyInfo.sid}}">
    <div class="card card-primary">
        <div class="card-header bg-primary">
            <h4 class="modal-title">{{gT('Privacy policy')}}</h4>
        </div>
        <div id="datasecurity_notice" class="card-body {{ aSurveyInfo.class.privacydatasecmodalbody }}">
            {{ aSurveyInfo.datasecurity_notice }}
        </div>
        <div class="ls-no-js-hidden card-footer">
            <button type="button" class="btn btn-primary" onclick="$('#datasecurity_accepted').prop('checked',true).trigger('change');" data-bs-dismiss="modal">
                {{gT("Accept")}}
            </button>
            <button type="button" class="btn btn-outline-secondary" onclick="$('#data-security-modal-{{aSurveyInfo.sid}}').collapse('hide');">
                {{gT("Close")}}
            </button>
        </div>
    </div>
</div>
<script>
$(function() {
    $("#datasecurity_accepted").closest("form").find("button[type='submit']").on("click", function() {
        if(!$('#datasecurity_accepted').prop('checked')) {
            /* dynamic show error */
            $('#datasecurity_error').removeClass("ls-js-hidden");
            if($('#datasecurity_error').length) {
                /* add it in aria and role */
                $('#datasecurity_error').attr("role", "alert");
                $('#datasecurity_accepted').attr("aria-describedby", "datasecurity_error datasecurity_notice");
            }
        }
    });
});
$("#datasecurity_accepted").on("change", function() {
    if($('#datasecurity_accepted').prop('checked')) {
        /* dynamic hide error */
        $('#datasecurity_error').addClass("ls-js-hidden");
    }
});
</script>
