<template>
  <div>
    <div :class="{ 'grid-cols-3 lg:grid-cols-6': selectable, 'grid-cols-3 lg:grid-cols-10': !selectable }" class="grid gap-4 lg:gap-6 mt-8" v-if="directories && directories.length > 0">
      <Directory
          v-for="directory in directories"
          @showInformation="showDirectoryInformation"
          @changeCurrentDirectory="emit('changeCurrentDirectory', directory.id)"
          :key="directory.id"
          :directory="directory"
      />
    </div>

    <DirectoryInformation
        :show="showDirectoryInformationModal"
        :directory="directoryInformation"
        @directoryUpdated="emit('directoryUpdated', $event)"
        @directoryDeleted="emit('directoryDeleted')"
        @close="showDirectoryInformationModal = false"
    />
  </div>
</template>

<script setup>
import Directory from "./Directory.vue";
import DirectoryInformation from "./DirectoryInformation.vue";
import {ref} from "vue";

const props = defineProps({
  directories: {
    type: Array,
    default: () => [],
  },
  selectable: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['changeCurrentDirectory', 'directoryUpdated', 'directoryDeleted'])

const showDirectoryInformationModal = ref(false)
const directoryInformation = ref(null)

const showDirectoryInformation = (directory) => {
  directoryInformation.value = directory
  showDirectoryInformationModal.value = true
}
</script>