<template>
  <div class="bookmarks-listing-container">
    <component-listing
      :id="listingId"
      :static-data="fetchedData"
      :fractions="1"
    >
      <template #default="{ item }">
        <FileParagraph
          :key="item.uuid"
          :herited-data="{ file: item }"
          @removeDocument="onRemove"
        />
      </template>

      <template #no-data>
        <BaseText>
          {{ $_tr('customs.BOOKMARKS.empty') }}
        </BaseText>
      </template>
    </component-listing>
  </div>
</template>

<script>
import { BaseText } from 'inside-collection/atoms'
import RefreshListingMixin from '@inside-listings/mixins/refresh-listing-mixin'
import FileParagraph from '../../../inside-overrides/inside-library/paragraphs/FileParagraph'

export default {
  name: 'BookmarksListing',
  components: {
    BaseText,
    FileParagraph
  },
  mixins: [RefreshListingMixin],
  props: {
    fetchedData: {
      type: Array
    }
  },
  data() {
    return {
      listingId: 'bookmarks-listing'
    }
  },
  methods: {
    onRemove(item) {
      this.$_deleteItem({
        listingId: this.listingId,
        item
      })
    }
  }
}
</script>
