<script setup>
  import { ref, onMounted } from "vue"
  import { VuePDF, usePDF } from '@tato30/vue-pdf'

  const props = defineProps({
    url: String
})



const page = ref(1)
const { pdf, pages } = usePDF(props.url)


</script>
<template>
  <div>
    <div class="mareike-invoice-pdfview-controls">
      <button @click="page = page > 1 ? page - 1 : page" class="button mareike-button page-switch-button">
        Vorherige Seite
      </button>
      <span>{{ page }} / {{ pages }}</span>

      <button @click="page = page < pages ? page + 1 : page" class="button mareike-button page-switch-button">
        Nächste Seite
      </button>

    <VuePDF :pdf="pdf" :page="page" class="mareike_pdv_view" fitParent="true" cale="0.9" height="90"/>
    </div>
  </div>
</template>

<style scoped>
.page-switch-button {
  padding: 8px 20px !important;
  width: 200px !important;
  margin: 0 10px !important;
}

.mareike-invoice-pdfview-controls {
  position: relative;
  top: -50px;
  text-align: center;
}

</style>