<template>
  <div>

    <b-modal id="expanded-image-holder" footerClass="border-0" centered :title="text" size="lg" v-model="expanded">
      <template slot="modal-footer"><span/></template>
      <div class="text-center">
      <b-img-lazy blank-src="@/assets/music_placeholder.png"
                  :src="src"
                  id="the-image-itself-expanded"
      />
      </div>
    </b-modal>

    <div @click="expanded = true" id="image-holder">
      <b-img-lazy blank-src="@/assets/music_placeholder.png"
                  :src="src"
                  id="the-image-itself"
      />
    </div>

  </div>
</template>

<script>
export default {
  name: "ExpandableImage",
  props: {
    src: String,
    text: String
  },
  data() {
    return {
      expanded: false
    }
  }
}
</script>

<style scoped>
#image-holder {
  cursor: zoom-in;
  width: inherit;
}

#image-holder img {
  width: inherit;
}

#the-image-itself-expanded {
  max-width: 100%;
  max-height: 100%;
}
</style>