<template>
  <div class="gallery-image">
    <img :src='src' @click="shown = !shown">
    <div :class="shown ? 'gallery-popup' : 'gallery-popup-hidden'" @click.self="shown = !shown">
      <img :src='src'>
      <a class="gallery-popup-exit" @click="shown = !shown" href="#">x</a>
    </div>
  </div>
</template>

<script>
export default {
    props: [ 'src' ],
    data() {
      return {
        shown: false,
      };
    },
}
</script>

<style>
.gallery-popup-hidden {
    @apply fixed h-0 w-screen opacity-0 transition-opacity;
}
.gallery-popup {
    @apply fixed w-screen h-screen left-0 top-0 py-16 px-16 z-20 flex flex-row items-center justify-center transition-opacity;
    background: rgba(0,0,0,0.7);
}
.gallery-popup img {
    @apply h-full;
}
.gallery-popup-exit {
    @apply fixed right-0 top-0 z-30 mx-8 my-4 text-2xl;
}
</style>
