<template>
  <div class="container">
        <div class="header">
            <h2>{{title}}</h2>
        </div>
        <div v-if="buttons" class="header">
            <slot name="buttons"></slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
  </div>
</template>

<script>
export default {
    props: [
        'title',
        'buttons'
    ]
}
</script>

<style scoped>
    .container {
        color: var(--grey-dark);
        background-color: var(--white-normal);
        border: 1px solid var(--grey-light);
        border-radius: 4px;
        box-shadow: 8px 8px 20px #00000022;
    }

    .content {
        padding: 12px;
    }

    .header, .footer {
        padding: 0px 12px;
    }

    .header h2 {
        padding: 8px 0;
        color: var(--primary-blue-dark);
    }

    .header { border-bottom: 1px solid var(--grey-light); }
    .footer { border-top: 1px solid var(--grey-light); }





</style>