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

<template>

    <div class="action-bar" :class="{save: true}">
        <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="import-zelebrationsplan" :class="{show: props.godi}" @click="$emit('importZelebrationsplan')"> <i class="icon">upload</i> Zelebrationsplan importieren</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% - 24px * 2);
    display: flex;
    padding: 6px 24px;
    background: #fafafa;
    justify-content: flex-end;
    border-bottom: 1px solid #e0e0e0;

    .other-action{
        transition: 200ms translate;
        translate: 220px;
        transition-delay: 100ms;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        button {
            margin: 0;
        }
    };

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

button {
    font-size: 13px;
    padding: 4px 10px 4px 6px;

    i {
        font-size: 18px;
        margin-right: 6px;
    }

    &:not(.show){
        display: none;
    }
}

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


</style>
