<template>
  <div class="groups-folders-listing-container">
    <Link :href="getPageLink(folder)" direction="row reverse" size="s">
      {{ $_tr('allDocuments') }}
    </Link>

    <component-listing
      v-if="subFolders.length"
      id="groups-folders-listing"
      class="folders-listing"
      :static-data="subFolders"
      :fractions="1"
      :pagination="false"
      :grid-gap="$_theme('spacingS')"
    >
      <template #default="{item}">
        <Link
          :key="item.uuid"
          :href="getPageLink(item.uuid)"
          :color="$_theme('colorSecondary')"
          direction="row reverse"
          size="s"
        >
          {{ item.title }}
        </Link>
      </template>
    </component-listing>
  </div>
</template>

<script>
import { Link } from 'inside-collection/components'

import { formatHref } from '@inside-library/helpers/Langs'

export default {
  name: 'GroupsFoldersListing',
  $_i18nRootPath: 'customs.GROUPS.FOLDERS',
  components: { Link },
  props: {
    folder: {
      type: String,
      required: true
    },
    subFolders: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getPageLink(uuid) {
      return formatHref(
        { name: 'GedPage', query: { folder: uuid } },
        this.$_currentLang
      )
    }
  }
}
</script>

<style lang="scss">
.groups-folders-listing-container {
  .folders-listing {
    margin-top: var(--spacing-m);
    padding-left: var(--spacing-l);

    a {
      width: fit-content;
    }
  }
}
</style>
