<script>
export default {
  props: {
    id: {type: String},
    title: {type: String, default: ""},
    has_detail : {type : Boolean, default : false},
    additional_class : {type : String, default :""}
  }
}
</script>
<template>
  <div :id="id" :class="`mb-5 ${additional_class}`">
    <h3 class="font-weight-bold">{{ title }}</h3>
    <p class="font-size-16">
      This is component <slot name="caption" />
    </p>
    <small class="font-weight-bold">Blue Print</small>
    <div class="border bg-light rounded mt-1 mb-5 p-3">
      <slot name="example" />

      <div class="col-12 mt-2" v-show="has_detail">
        <strong>v-model : </strong><slot name="value" />
      </div>
    </div>
    <hr>
  </div>
</template>