<template>
  <div class="text-center m-7">
    <slot name="image">
      <eb-image v-if="image" :src="image" width="200" class="m-auto"></eb-image>
      <svg
        v-else
        xmlns="http://www.w3.org/2000/svg"
        width="200"
        class="m-auto"
        viewBox="0 0 512 512"
      >
        <path
          fill="#bdfdff"
          d="M271.7 250c49.5 28.6 129.6 28.6 178.8 0 49.2-28.6 49-75-.6-103.5s-129.6-28.6-178.8 0c-49.2 28.6-48.9 75 .6 103.5"
        ></path>
        <path
          fill="#5aaae7"
          d="M468 303.4c29-16.8 43.5-39 43.6-61l.4-66.2v.9c.4-22.7-14.4-45.5-44.3-62.8-58.9-34-154-34-212.4 0-29.1 17-43.6 39-43.6 61.3v-.2l-.4 66.1c-.1 22.4 14.7 44.9 44.3 62 58.8 34 153.9 34 212.3 0zm-20.3-78c-47.1 27.3-123.7 27.3-171.2 0-18.4-10.7-29.8-24-33.9-37.8 4.2-13.5 15.2-26.5 33.3-37 47.1-27.4 123.8-27.4 171.2 0 18.5 10.6 29.8 23.9 34 37.7-4.2 13.6-15.3 26.6-33.4 37z"
        ></path>
        <g fill="#6e76e5">
          <path
            d="M447.2 126.2c-47.5-27.4-124.1-27.4-171.2 0-23.4 13.6-35.1 31.4-35.2 49.3v24.3c0-17.8 11.7-35.6 35.1-49.2 47.1-27.4 123.8-27.4 171.2 0 23.8 13.7 35.8 31.8 35.7 49.9V176c.1-18-11.8-36.1-35.6-49.9z"
          ></path>
          <path
            d="M468.4 237.3c-58.5 34-153.6 34-212.4 0-29.6-17.1-44.4-39.5-44.3-62l-.4 66.2c-.1 22.4 14.7 44.9 44.3 62 58.8 34 153.9 34 212.3 0 29-17 43.6-39 43.7-61.1l.4-66.2c0 22.1-14.6 44.2-43.6 61.1z"
          ></path>
        </g>
        <path
          fill="#57a4ff"
          d="M255.3 114.3c58.5-34 153.5-34 212.4 0 58.8 34 59.1 89 .7 123-58.5 34-153.6 34-212.4 0-58.8-34-59.1-89-.7-123zm191.9 12c-47.5-27.5-124.1-27.5-171.2 0-47.1 27.3-46.9 71.7.5 99 47.5 27.4 124 27.4 171.2 0 47.1-27.3 46.9-71.7-.5-99M238 243.7l-105.5 60.9c2.6-1.5 6-1.3 10 .9 8 4.4 14.5 15.5 14.6 24.7.1 4.7-1.5 8-4.2 9.6l105.4-61c2.7-1.5 4.3-4.8 4.3-9.5a31.7 31.7 0 0 0-14.7-24.8c-3.9-2.2-7.4-2.3-10-.8z"
        ></path>
        <path
          fill="#1d81cd"
          d="M128.3 314.1c0 9.3 6.6 20.4 14.6 24.8 8 4.5 14.4.6 14.2-8.7 0-9.2-6.6-20.3-14.6-24.7s-14.3-.6-14.2 8.6z"
        ></path>
        <path
          fill="#78baec"
          d="M208.2 255.8c-6.9-3.8-13-4.1-17.5-1.5L7.3 360.3l.4-.2C2.9 362.7-.1 368.5 0 377c.2 16 11.6 35.4 25.5 43 6.8 4 13 4.2 17.5 1.5h-.1l183.4-106c4.6-2.6 7.4-8.4 7.3-16.5a55.1 55.1 0 0 0-25.4-43.1z"
        ></path>
        <path
          fill="#71b8ff"
          d="M190.7 254.3L7.3 360.3c4.5-2.6 10.6-2.3 17.5 1.5a55.1 55.1 0 0 1 25.4 43c.1 8.2-2.7 14-7.3 16.7l183.4-106c4.6-2.7 7.4-8.5 7.3-16.6a55.2 55.2 0 0 0-25.4-43.1c-6.9-3.8-13-4.1-17.5-1.5z"
        ></path>
        <path
          fill="#57a4ff"
          d="M0 376.9c.2 16 11.6 35.4 25.5 43s25 1 24.7-15a55.1 55.1 0 0 0-25.4-43.1c-14-7.7-25-1-24.8 15.1z"
        ></path>
      </svg>
    </slot>
    <slot>
      <p class="text-xxl">{{ label ? label : 'No Data available!' }}</p>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'EbNoData',
  props: ['label', 'image']
};
</script>
