<template>
  <div class="page-container">
    <div v-if="pending">
      <el-skeleton :rows="5" animated />
    </div>
    <div v-else>
      <support-tabs model-value="documents" />
      <div class="page-header">
        <h1 class="page-title">{{ $t("navigation.documents") }}</h1>
        <el-breadcrumb class="breadcrumb" separator="/">
          <el-breadcrumb-item class="text-md opacity-50">
            <NuxtLink :to="$localePath('/')">{{
              $t("navigation.home")
            }}</NuxtLink>
          </el-breadcrumb-item>
          <el-breadcrumb-item class="text-md opacity-50">
            <NuxtLink :to="$localePath('/support')">{{
              $t("navigation.support")
            }}</NuxtLink>
          </el-breadcrumb-item>
          <el-breadcrumb-item class="text-md opacity-50">
            <NuxtLink :to="$localePath('/support/documents')">{{
              $t("navigation.documents")
            }}</NuxtLink>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="page-content">
        <document-list :documents="documents" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { find } = useStrapi();
const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale();

const pending = ref(true);

const documents = ref<StrapiMedia[]>([]);

onMounted(async () => {
  try {
    const response = await find<ProductionDocument>("production-documents", {
      locale: strapiLocale,
      populate: "document",
    });
    if (response.data) {
      documents.value =
        response.data.map((item) => ({
          ...item.document,
        })) || [];
    }
  } catch (error) {
    console.error("Error fetching documents:", error);
  } finally {
    pending.value = false;
  }
});
</script>

<style scoped>
.page-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  padding: 2rem 2rem 0rem;
}

.page-title {
  font-size: 2rem;
  font-weight: bold;
  color: var(--el-color-primary);
  margin-bottom: 1rem;
}

.breadcrumb {
  margin-left: auto;
}

.page-content {
  padding: 1rem 2rem 2rem;
}
</style>
