<script setup lang="ts">
const emit = defineEmits(["addPlan", "addGodi", "addMini", "save"])
const props = defineProps<{
    save: boolean,
    plan: boolean,
    godi: boolean
}>()
</script>

<template>

    <div class="action-bar" :class="{save: props.save}">
        <div class="other-action">
            <button class="add-plan" :class="{show: props.plan}" @click="$emit('addPlan')"> <i class="icon">add_box</i> Neuer Plan</button>
            <button class="add-godi" :class="{show: props.godi}" @click="$emit('addGodi')"> <i class="icon">add</i> Gottesdienst</button>
            <button class="add-mini" :class="{show: props.godi}" @click="$emit('addMini')"> <i class="icon">add</i> Ministrant</button>
        </div>
        <button class="save" :class="{show: props.save}" @click="$emit('save')"><i class="icon">save</i> Änderungen speichern </button>
    </div>

</template>

<style scoped lang="less">

.action-bar {
    width: calc(100% - 32px * 2);
    border-top: 1px solid #d7d5d5;
    display: flex;
    padding: 10px 32px;
    background: #ffffff;
    justify-content: flex-end;

    .other-action{
        transition: 200ms translate;
        translate: 220px;
        transition-delay: 100ms;
    };

    &.save .other-action {
        translate: 0;
        transition-delay: 0ms;
    }
}

button {
    &:not(.show){
        display: none;
    }
    &.save{
        &:not(.show){
            display: flex;
        }
        width: 220px;
        translate: 0 calc(100% + 20px);
        transition: 200ms translate;
        &.show {
            translate: 0;
            transition-delay: 100ms;
        }
    }
}

@media print {
    .action-bar{
        display: none;
    }
}


</style>
