<template>
<div class="shadow-classic rounded-md bg-indigo-200 p-3 md:px-5 md:py-7">
    <feed-header :created_at='entity.created_at_humans' :user='user' />

    <div @click.stop="" class="mt-3 md:mt-6 feed-body">
        <div class="mb-3 md:mb-6 text-gray text-sm md:text-base">
            {{entity.body}}
        </div>
        <div class="grid gap-1 md:gap-3 grid-cols-2 md:grid-cols-[repeat(auto-fit,minmax(280px,1fr))]">
            <div v-for="media in entity.collection_medias" :key="media.id">
                <video :src="media.url" controls></video>
             </div>
        </div>
    </div>
    <feed-footer
        @likeFeed='likeFeed'
        :likes='entity.likes'
        :liked='entity.liked'
        :comments='entity.comments'
     />
</div>
</template>

<script>
import FeedHeader from '@/Shared/FeedList/FeedHeader'
import FeedFooter from '@/Shared/FeedList/FeedFooter'

export default {
  components: {
      FeedHeader,
      FeedFooter,
  },
  emits: ["likeFeed"],
  props: {
    entity: Object,
    user: Object,
    feed_id: Number,
  },

  methods: {
    likeFeed() {
      this.$emit("likeFeed");
    },
  },


};
</script>
