<template>
    <div class="button_container">
            <img src="../assets/add_button_active.png"
                 class="add_button"
                 v-if="can_add" @click="toAddPresent"
            />
            <img src="../assets/add_button_inactive.png"
                 class="add_button"
                 v-if="!can_add"
            />
    </div>
</template>

<script>
    export default {
        name: "add-present-button",
        props: ['can_add'],
        methods: {
            toAddPresent() {
                this.$router.push('presentRegister');
            }
        }
    }
</script>

<style scoped>
    .add_button {
        width: 50px;
        height: 50px;
        pointer-events: auto;
    }
    .button_container {
        position: fixed;
        bottom: 20px;
        z-index: 2;
        width: 100%;
        pointer-events: none;
    }
</style>