<template>
  <meta-head title="Профиль юзера"></meta-head>

  <profile-header :is_leader="is_leader" :user="user"
                  :counts="counts" :limit-leader="limitLeader"
                  :auth-user-active-subscription="authUserActiveSubscription"
                  :package-completed="packageCompleted"
  />

  <profile-menu :user="user" />

  <div v-if="packet?.id && !packageCompleted && !user.is_auth_user && user.private" class="mt-12 xl:container xl:mx-auto ">
    <div class="p-5 text-lg text-white flex items-center gap-10 bg-indigo-200 mx-3">
      <div>
        <h2>Купить подписку на пользователя</h2>
        <div>Цена: <span>{{ packet.price }}</span></div>
      </div>
      <div>
        <button type="button"
                class="p-5  text-lg  bg-orange rounded-lg twext-white"
                @click="createSubsPacket"
        >
          Оплатить
        </button>
      </div>
    </div>
  </div>
  <!-- <div v-if="testPeriod" class="mt-12 xl:container xl:mx-auto px-2 md:px-3 ">
    <div class="bg-pink p-10 text-center text-white text-xl rounded-xl">
      <p>Вам предоставлен тестовый доступ в течении часа!</p>
      <p>
        после ознакомления, Вам нужно будет оплатить подписку, <inertia-link class="underline" :href="route('setting.tarif')">
          по данной ссылке
        </inertia-link> : (или перейти в настройки -> тарифы)
      </p>
    </div>
  </div> -->

  <div v-if="feeds.length" class="mt-12 xl:container xl:mx-auto px-2 md:px-3">
    <div class="grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 cards-block rounded-md bg-indigo-200 shadow-classic grid gap-2 lg:gap-4 grid-cards p-2 lg:p-5">
      <feed
        :feeds="feeds"
        :next-cursor="nextCursor"
      />
    </div>
  </div>
  <div v-else class="mt-12 xl:container xl:mx-auto px-2 md:px-3 ">
    <div class="font-bold text-xl lg:text-3xl text-gray text-center">
      Записи не найдены
    </div>
  </div>
</template>

<script>
import Layout from '@/Shared/Layout.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import ProfileHeader from '@/Shared/Partials/ProfileHeader.vue'
import ProfileMenu from '@/Shared/Partials/ProfileMenu.vue'
import Feed from '@/Shared/Feed/Feed.vue'
import { Inertia } from '@inertiajs/inertia'

export default {
    components: {
        Feed,
        MetaHead,
        ProfileHeader,
        ProfileMenu,
    },
    layout: Layout,
    props: {
        user: {
            type: Object,
            default: () => {}
        },
        packet: {
            type: Object,
            default: () => {}
        },
        feeds: {
            type: Array,
            default: () => {}
        },
        counts: {
            type: Object,
            default: () => {}
        },
        nextCursor: {
            type: String,
            default: ''
        },
        limitLeader: {
            type: Boolean,
            default: false
        },
        packageCompleted: {
            type: Boolean,
            default: false
        },
        authUserActiveSubscription: Boolean,
        close_account: Boolean,
        is_leader: Boolean,

    },
    methods: {
        createSubsPacket()
        {
            // asdasd
            Inertia.post(
                route('user.package.subs'),
                { packet_id: this.packet.id },
                // { preserveScroll: true, preserveState: true }
            )
        }
    }
}
</script>
