<template>
  <div class="project-data-view-window">
    <annotated-image v-if="current" :current="current"/>
    <div v-else class="empty">
      There are no items in this collection.
    </div>

    <media-control :current="current"
                   :hasPreviousPage="hasPreviousPage"
                   :hasNextPage="hasNextPage"
                   :hasPreviousElement="hasPreviousElement"
                   :hasNextElement="hasNextElement"
                   @previousPage="$refs.media.prevPage()"
                   @nextPage="$refs.media.nextPage()"
                   @previousElement="$refs.media.prevElement()"
                   @nextElement="$refs.media.nextElement()"
                   @filter="filter=$event"/>

    <paginated-media ref="media"
                     rows="1" width="100" :inline="true"
                     :current="current"
                     :filter="filter"
                     @click="current=$event"
                     @hasPreviousPage="hasPreviousPage=$event"
                     @hasNextPage="hasNextPage=$event"
                     @hasPreviousElement="hasPreviousElement=$event"
                     @hasNextElement="hasNextElement=$event"/>
  </div>
</template>

<script>
import PaginatedMedia from "@/components/media/paginated-media";
import AnnotatedImage from "@/components/media/annotated-image";
import MediaControl from "@/components/media/media-control";

export default {
  name: "project-data-view-window",
  components: {MediaControl, AnnotatedImage, PaginatedMedia},
  data: function () {
    return {
      current: false,
      hasPreviousPage: false,
      hasNextPage: false,
      hasPreviousElement: false,
      hasNextElement: false,
      filter: false
    }
  }
}
</script>

<style scoped>
.project-data-view-window {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.annotated-image {
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}

.empty {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/ .paginated-media {
  background-color: rgba(0, 0, 0, 0.5);
  color: whitesmoke;
  font-size: 90%;
  flex-shrink: 0;
}

/deep/ .paginated-media .image {
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
</style>
