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

        <p>Deze volgende cookies worden gebruikt:</p>

        <div class="cookie-types">
            <div class="cookie-type analytic">
                <img src="/images/cookie/cookie_clean_color.svg" class="icon"/>
                <div class="text">
                    <div class="wrapper">
                        <p>Functionele en analytische cookies verzamelen geen persoonsgegevens.</p>
                    </div>
                </div>
            </div>
            <div id="trackingCookie" data-status="disabled" class="cookie-type tracking optional" onclick="toggleTrackingCookies();">
                <img src="/images/cookie/cookie_extended_color.svg" class="icon"/>
                <div class="text">
                    <div class="wrapper">
                        <p>Tracking cookies volgen bezoekers wanneer zij andere websites bezoeken, waarbij gegevens met
                            derden worden uitgewisseld.</p>
                    </div>
                </div>
                <span class="disable-button"></span>
            </div>
        </div>

        <p onclick="hideCookieMessageSwitch();" id="hide-cookie-message" class="hide">Ik snap het, verberg de cookiemelding.</p>

    </div>
</aside>

<style>
    #cookie-switch {
        padding: 130px 0 30px;
        width: 100%;
        background-color: #f5f5f5;
    }
    #cookie-switch .placeholder {
        width: 85.75%;
        display: block;
        text-align: center;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }
    #cookie-switch .placeholder p, #cookie-switch .placeholder p a {
        font-size: 15px;
        line-height: 18px;
    }
    #cookie-switch .placeholder p {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
    }
    #cookie-switch .placeholder p a, #cookie-switch .placeholder #hide-cookie-message {
        text-decoration: underline;
    }
    #cookie-switch .placeholder #hide-cookie-message{
        cursor: pointer;
        opacity: 1;
        transition: opacity 0.3s;
    }
    #cookie-switch .placeholder #hide-cookie-message.transition-out{
        opacity: 0.3;
        cursor: default;
    }
    #cookie-switch .placeholder #hide-cookie-message.hide{
        opacity: 0;
        cursor: default;
        transition: none;
    }
    #cookie-switch .placeholder .cookie-types {
        display: block;
        margin-top: 25px;
        margin-bottom: 30px;
        width: 100%;
        text-align: center;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type {
        position: relative;
        display: inline-block;
        padding: 10px;
        border-radius: 4px;
        border: 2px solid #ffd100;
        text-align: left;
        max-width: 350px;
        width: calc((100% - 20px) / 2);
        opacity: 1;
        transition: opacity 0.3s, border 0.3s;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type:not(.analytic):hover{
        border-color: #E34F5D;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type.optional {
        cursor: pointer;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type[data-status='disabled'] {
        opacity: 0.2;
        border-color: #ffd100 !important;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type img {
        width: 40px;
        display: inline-block;
        vertical-align: middle;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type .text {
        display: inline-block;
        height: 75px;
        width: calc(100% - 60px);
        margin-left: 10px;
        vertical-align: middle;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type .text .wrapper {
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -webkit-justify-content: flex-start;
        -moz-justify-content: flex-start;
        -ms-justify-content: flex-start;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        height: 75px;
        width: 100%;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type .disable-button {
        position: absolute;
        right: -13px;
        top: -13px;
        display: block;
        width: 26px;
        height: 26px;
        background-color: #E34F5D;
        border-radius: 100%;
        opacity: 1;
        transition: background-color 0.3s, opacity 0.3s;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type:hover .disable-button{
        background-color: #ad0010;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type[data-status='disabled'] .disable-button{
        opacity: 0;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type .disable-button:before, #cookie-switch .placeholder .cookie-types .cookie-type .disable-button:after {
        content: '';
        position: absolute;
        top: 11.5px;
        left: 7px;
        display: block;
        width: 12px;
        height: 3px;
        background-color: white;
        transform-origin: 50% 50%;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type .disable-button:before {
        transform: rotate(45deg);
    }
    #cookie-switch .placeholder .cookie-types .cookie-type .disable-button:after {
        transform: rotate(-45deg);
    }
    #cookie-switch .placeholder .cookie-types .cookie-type p {
        display: inline-block;
        vertical-align: middle;
    }
    #cookie-switch .placeholder .cookie-types .cookie-type + .cookie-type {
        margin-left: 20px;
    }
    @media only screen and (max-width: 950px) {
        #cookie-switch .placeholder .cookie-types .cookie-type{
            display: block;
            width: 100%;
            margin: 0 auto;
        }
        #cookie-switch .placeholder .cookie-types .cookie-type + .cookie-type{
            margin-left: auto;
            margin-top: 10px;
        }
        #cookie-switch .placeholder p {
            display: block;
        }
    }
    @media only screen and (max-width: 500px) {
        #cookie-switch .placeholder .cookie-types .cookie-type .text, #cookie-switch .placeholder .cookie-types .cookie-type .text .wrapper{
            height: auto;
            min-height: 70px;
        }
    }
</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=/';
        console.log(name);
        console.log(document.cookie);
    }

    if (getCookieSwitch('trackingCookieAccepted')) {
        document.getElementById('trackingCookie').setAttribute('data-status', 'enabled');
    }

    if (getCookieSwitch('cookieMessage')) {
        document.getElementById('hide-cookie-message').classList.add('hide');
    }
    else{
        document.getElementById('hide-cookie-message').classList.remove('hide');
    }

    function hideCookieMessageSwitch() {
        setCookieSwitch('cookieMessage', true, 90);
        document.getElementById('hide-cookie-message').classList.add('transition-out');
        var cookieMessage = document.getElementById('cookie-message');
        if(cookieMessage) cookieMessage.classList.add('transition-out');
    }

    function toggleTrackingCookies() {

        var trackingCookieButton = document.getElementById('trackingCookie');
        var trackingCookieStatus = trackingCookieButton.getAttribute('data-status');

        if(trackingCookieStatus === 'disabled'){
            setCookieSwitch('trackingCookieAccepted', 'true', 90);
            trackingCookieButton.setAttribute('data-status', 'enabled');
        }
        else{
            eraseCookieSwitch('trackingCookieAccepted');
            trackingCookieButton.setAttribute('data-status', 'disabled');
        }
    }

</script>