<script>
import ContentRows from "~/components/atoms/utility/ContentRows";
import ContentTitle from "~/components/atoms/title/ContentTitle";
import ActiveButton from "~/components/atoms/button/ActiveButton";

export default {
  props: {
    is_default_layout: {default: true},
    title_text: {type: String, default: ""},
    title_variant: {default: "dark"},
    title_size: {default: "md"},
    has_button: {boolean: false},
    button_text: {default: "Tambah Data"},
    button_variant: {default: "primary"},
    button_type: {default: "fill"},
    left_size: {default: "6"},
    right_size: {default: "6"},
  },
  components: {
    ActiveButton,
    ContentTitle,
    ContentRows,
  },
}
</script>
<template>
  <content-rows :has_gutters="true">
    <div :class="`col-12 col-md-${left_size}`">
      <content-title v-show="is_default_layout" :value="title_text" :variant="title_variant" :size="title_size"/>
      <slot name="left-title"/>
    </div>
    <div :class="`col-12 col-md-${right_size} text-center text-md-right`">
      <active-button v-show="has_button" :text="button_text" :variant="button_variant" :type="button_type"/>
      <slot name="right-side"/>
    </div>
  </content-rows>
</template>