<template>
    <div class="confidential" v-on:click="toggleBlur">
        <div class="confidential-content blur">
            <slot name="confidential-content"></slot>
        </div>
        <i class="fa fa-eye toggle" aria-hidden="true"></i>
    </div>
</template>

<script>
export default {
    name: "Confidential",
    methods : {
        toggleBlur: function(e){
            if(e.target.matches('.toggle')){
                e.target.previousElementSibling.classList.toggle("blur");
                e.target.classList.toggle("fa-eye");
                e.target.classList.toggle("fa-eye-slash");
            }
        },
    }
}
</script>

<style scoped lang='scss'>
    .confidential{
        align-items: center;
        display: flex;
    }
    .toggle{
        margin-top: 28px;
        cursor: pointer;
        display: block;
        float: right;
        margin-right: 20px;
    }
    .blur {
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        filter: blur(5px);
    }
</style>