<script lang="ts" setup="">
import MaterialsItem from "~/components/MaterialsItem.vue";
import {useMaterialsStore} from "~/stores/materials/useMaterialsStore";

const materialsStore = useMaterialsStore()
await useAsyncData(async () => {
  await materialsStore.fetchMaterials()
  return true
})
</script>

<template>
  <div>
    <h1 class="h1">Материалы</h1>

    <div v-if="materialsStore.errorMaterials" class="error">Упс... Данные не загрузились :(</div>
    <div v-else class="materials">
      <template
          v-for="item of materialsStore.getMaterialsSorted" :key="item.id"
      >

        <NuxtLink
          :to="{
            name: 'materials-id', params: {id: item.id }
          }"
          target="_blank"
          class="link"
        >
          <MaterialsItem :item />
        </NuxtLink>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.h1 {
  font-family: SourceSans3, sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 120%;
}

.materials {
  padding-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.link {
  text-decoration: none;
  color: var(--text-black);
}

@media screen and (max-width: 768px) {
  .materials {
    flex-direction: column;
  }
}
</style>
