<template>
  <MainLayout :gap="false">
    <template #header>
      <TopBar class="navbar" :gap="false">
        <template #left>
          <div>{{ entry.fileName }}</div>
        </template>
        <template #right>
          <Button icon="fa-solid fa-xmark" @click="onClose">{{ tr('main.dialog.close') }}</Button>
        </template>
      </TopBar>
    </template>
    <template #body>
      <div class="content">
        <div>
          <img class="preview-icon" :src="entry.previewUrl" />
          <h1>{{ entry.fileName }}</h1>
          <Button icon="fa-solid fa-download" :href="entry.downloadFileUrl">Download</Button>
        </div>
      </div>
    </template>
  </MainLayout>
</template>

<script>

import Button from '../components/Button.vue';
import MainLayout from '../components/MainLayout.vue';
import TopBar from '../components/TopBar.vue';
import utils from '../utils.js';

export default {
    name: 'GenericViewer',
    components: {
      Button,
      TopBar,
      MainLayout
    },
    props: {
      tr: {
        type: Function,
        default(id) { console.warn('Missing tr for GenericViewer'); return utils.translation(id); }
      }
    },
    emits: [ 'close' ],
    data() {
      return {
        entry: {}
      };
    },
    methods: {
      async open(entry) {
        if (!entry) return;

        this.entry = entry;
      },
      onClose() {
        this.$emit('close');
      }
    },
    mounted() {
    }
};

</script>

<style scoped>

.preview-icon {
  width: 128px;
  height: 128px;
}

.content {
  text-align: center;
  background-color: var(--pankow-color-background);
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
