<template>
  <div class="mt-8 block border p-6">
    <h3 class="text-blue-dark">
      {{ $t("circlePage.documents.title") }}
    </h3>
    <div>
      <div class="mt-4 leading-relaxed">
        {{ $t("circlePage.documents.userDescription") }}
      </div>
    </div>
    <ul
      v-if="courseSessionsStore.circleDocuments.length"
      class="mt-8 border-t border-t-gray-500"
    >
      <template
        v-for="learningSequence of courseSessionsStore.circleDocuments"
        :key="learningSequence.id"
      >
        <DocumentListItem
          v-for="doc of learningSequence.documents"
          :key="doc.url"
          :subtitle="learningSequence.title"
          :doc="doc"
        />
      </template>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useCourseSessionsStore } from "@/stores/courseSessions";
import DocumentListItem from "@/components/circle/DocumentListItem.vue";

const courseSessionsStore = useCourseSessionsStore();
</script>
