<aside id="cookie-switch">
    <div class="placeholder">

        <div class="cookie-switch-title">
            <h3>Cookieinstellingen wijzigen</h3>
            <p>Selecteer hieronder welke cookies je wilt toestaan.</p>
        </div>

        <div class="cookie-types">
            <label class="cookie-type analytic">
                <input type="checkbox" checked/>
                <span>
                    <strong>Functionele en <span>analytische cookies</span></strong><br/>
                    Deze verzamelen geen persoonsgegevens
                </span>
            </label>
            <label id="trackingCookie" data-status="disabled" class="cookie-type tracking optional">
                <input onchange="enableSaveButton();" id="trackingCookieInputSwitch" type="checkbox"/>
                <span>
                    <strong>Tracking cookies</strong><br/>
                    Deze volgen bezoekers wanneer zij andere websites bezoeken,
                    waarbij gegevens met derden worden uitgewisseld.
                </span>
            </label>
        </div>

        <a onclick="saveCookieSetting();" id="save-cookie-settings">
            Instellingen wijzigen en accepteren
        </a>

    </div>
</aside>

<style>
    #cookie-switch {
        margin-bottom: 50px;
        padding: 30px 0 50px;
        border-bottom: 1px solid #e6e6e6;
        width: 100%;
    }
    #cookie-switch .placeholder {
        width: 100%;
        display: block;
    }
    #cookie-switch .placeholder .cookie-switch-title h3 {
        margin: 0 0 12px;
        font-size: 24px;
        line-height: 26px;
    }
    #cookie-switch .placeholder .cookie-switch-title p {
        font-size: 16px;
        line-height: 21px;
    }
    #cookie-switch .placeholder .cookie-types {
        display: block;
        margin: 30px 0 50px;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type {
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        -ms-align-items: flex-start;
        width: 100%;
        max-width: 420px;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type + .cookie-type {
        margin-top: 25px;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type.analytic {
        pointer-events: none;
        cursor: not-allowed;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type.optional {
        cursor: pointer;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type input {
        margin: 4px 0 0;
        width: 13px;
        height: 13px;
        display: block;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        background-image: url("/img/komma/cookie-sprite.svg");
        background-size: 70px 30px;
        background-position: -55px -14px;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type input:focus{
        outline: none;
        box-shadow: none;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type input:checked {
        background-position: -55px 0;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type>span {
        display: block;
        width: calc(100% - 55px);
        font-size: 14px;
        line-height: 20px;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type>span strong {
        font-size: 18px;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type>span strong span{
        white-space: nowrap;
    }
    #cookie-switch .placeholder #save-cookie-settings{
        display: inline-block;
        padding: 13px 20px;
        border-radius: 4px;
        background-color: #acc724;
        transition: background-color 0.4s, opacity 0.4s;

        font-size: 18px;
        line-height: 21px;
        color: white;
        cursor: pointer;
    }
    #cookie-switch .placeholder #save-cookie-settings:hover{
        background-color: #95a520;
    }
    #cookie-switch .placeholder #save-cookie-settings.clicked{
        opacity: 0.2;
    }

    @media only screen and (max-width: 460px) {
        #cookie-switch .placeholder .cookie-types .cookie-type span{
            width: calc(100% - 30px);
        }
    }


</style>

<script>
    function setCookieSwitch(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    function getCookieSwitch(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    function eraseCookieSwitch(name) {
        document.cookie = name + '=; Max-Age=-99999999; path=/';
    }

    if (getCookieSwitch('trackingCookieAccepted')) {
        document.getElementById('trackingCookieInputSwitch').checked = true;
    }


    function saveCookieSetting() {

        setCookieSwitch('cookieMessage', true, 90);

        if(document.getElementById('trackingCookieInputSwitch').checked === true){
            setCookieSwitch('trackingCookieAccepted', 'true', 90);
        }
        else{
            eraseCookieSwitch('trackingCookieAccepted');
        }

        document.getElementById('save-cookie-settings').classList.add('clicked');

        var cookieMessage = document.getElementById('cookie-message');
        if (cookieMessage) cookieMessage.classList.add('transition-out');
        setTimeout(function () {
            location.reload();
        }, 500);
    }

    function enableSaveButton() {
        document.getElementById('save-cookie-settings').classList.remove('clicked');
    }

</script>