<template>
  <div class="box-layout">
    <Card
      dis-hover
      class="box-layout__card"
    >
      <slot />
    </Card>

    <div
      v-if="isFooter"
      class="box-layout__footer"
    >
      <slot name="footer" />
    </div>

    <banner-nav />
  </div>
</template>

<script>
import BannerNav from '@/vue/components/Widget/BannerNav.vue';

export default {
  name: 'BoxLayout',
  components: {
    'banner-nav': BannerNav,
  },
  props: {
    isFooter: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped>
.box-layout {
  width: 100%;
}

.box-layout__card {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow-y: auto;
  max-height: calc(100vh - 120px);
}

.box-layout__footer {
  margin-top: 8px;
}

@media (max-width: 600px) {
  .box-layout__card {
    border-radius: 0;
    max-height: calc(100vh - 100px);
  }
}
</style>
