<template>

<Head>
    <title>{{feed.entity.title}}</title>
    <meta name="description" :content="feed.entity.body">
    <meta property="og:url"           :content="route(`${feed.entity.type}.show`, feed.entity.slug)">
    <meta property="og:type"          content="website">
    <meta property="og:title"         :content="feed.entity.title">
    <meta property="og:description"   :content="feed.entity.body">
    <meta property="og:image"         :content="feed.entity.preview">
    <meta name="twitter:card" content="summary_large_image">

    <!-- <meta name="twitter:title" :content="feed.entity.title">
    <meta name="twitter:description" :content="feed.entity.body">
    <meta name="twitter:image" :content="feed.entity.preview">
    <meta name="twitter:card" content="summary_large_image"> -->

</Head>

<header-auth v-if="!$page.props.auth.user" />

<modal-share :entity='feed.entity' ref="shareModalNode" />
            <div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 md:grid grid-cols-12  ">
               <modal-feed-media
                    :type='feed.type'
                    :feed_id='feed.id'
                    :title='feed.entity.title'
                    :preview='feed.entity.preview'
                    :medias='feed.entity.collection_medias'
                    class="border-l border-r md:border-r-0 border-t border-b border-indigo-100"
                 />

                <modal-feed-body
                    @openShare='showShareModal'
                    :user='user'
                    :feed_id='feed.id'
                    :entity='feed.entity'
                    class="border-l border-r md:border-t border-b border-indigo-100"
                 />

            </div>

</template>

<script>
import { Head } from "@inertiajs/inertia-vue3";
import Layout from "@/Shared/Layout.vue";
import ModalFeedMedia from "@/Shared/Overlay/ModalFeedMedia.vue";
import ModalFeedBody from "@/Shared/Overlay/ModalFeedBody.vue";
import ModalShare from "@/Shared/Overlay/ModalShare.vue";
import HeaderAuth from "@/Shared/LayoutParts/HeaderAuth.vue";

export default {
  layout: Layout,
  components: {
    Head,
    ModalShare,
    ModalFeedMedia,
    ModalFeedBody,
    HeaderAuth,
  },
  props: {
    feed: Object,
    user: Object,
  },
  provide() {
    return {
      is_exist_menu: false
    }
  },

  methods: {
    showShareModal() {
      this.$refs.shareModalNode.openModal();
    },
  },
};
</script>
