<template>
  <meta-head title="Покупки"></meta-head>

  <div class="xl:container xl:mx-auto px-2 md:px-3">
    <div class="mt-16 shadow-classic rounded-md bg-indigo-200">
      <div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
        <settings-menu />

        <div class="col-span-4">
          <div class="m-4 lg:m-8 grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-2 lg:gap-4">
            <inertia-link :href="route('setting.show.purchases', feed.id)" v-for="feed in feeds" :key="feed.id" class="block contain relative overflow-hidden">
               <feed-header-misc :count="1" :type="feed.type" />
                <div>
                    <feed-preview class="w-full h-36 md:h-72 object-cover" :type="feed.type" :source='feed.preview' />
                </div>
                <p class="mt-2 text-gray-light text-sm">Цена: {{feed.price}}</p>
                <p class="mt-2 text-gray-light text-sm">Дата покупки: {{feed.purchase_date}}</p>
            </inertia-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Layout from "@/Shared/Layout";
import SettingsMenu from "@/Shared/LayoutParts/SettingsMenu";
import MetaHead from "@/Shared/MetaHead";
import Feed from "@/Shared/Feed/Feed";
import FeedHeaderMisc from "@/Shared/Feed/HeaderMisc";
import FeedPreview from "@/Shared/Feed/FeedPreview";
export default {
  layout: Layout,
  components: {
    Feed,
    MetaHead,
    SettingsMenu,
    FeedHeaderMisc,
    FeedPreview,
  },
  props: {
    feeds: Array,
  },
  methods: {},
};
</script>
