<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 p-5">
          <div class="mb-4 flex items-center text-gray-light text-lg font-medium">
            <inertia-link :href="route('setting.purchases')" class="block hover:underline">
              Вернуться
            </inertia-link>
            <span class="px-3">/</span>
            <h1 class="text-gray">
              Скачать медиа контент
            </h1>
          </div>

          <div class="my-8 flex items-center justify-between">
            <inertia-link :href="route('profile.user', seller.username)" class="flex items-center">
              <div class="flex-shrink-0 block mr-2 md:mr-4">
                <user-avatar :user="seller" size="small"
                             class="w-10 h-10 md:w-16 md:h-16 text-lg"
                />
              </div>
              <div class="flex flex-col">
                <span class="text-sm md:text-base block font-medium text-white">{{ seller.name }}</span>
                <span class="text-xs text-gray-light">продавец</span>
              </div>
            </inertia-link>

            <div class="text-right">
              <p class="mt-2 text-gray-light text-sm">
                Цена: {{ purchase.price }}
              </p>
              <p class="mt-2 text-gray-light text-sm">
                Дата покупки: {{ purchase.purchase_date }}
              </p>
            </div>
          </div>



          <div v-if="purchase.title" class="text-lg text-gray font-semibold">
            {{ purchase.title }}
          </div>
          <div v-if="purchase.body" class="text-lg mt-4 text-gray-light"
               v-html="purchase.body"
          ></div>

          <div class="mt-4">
            <component
              :is="currentTypeNode"
              :purchase="purchase"
            ></component>
          </div>

          <div class="mt-12 flex -mx-3 -my-1 flex-wrap">
            <a :href="route('download.purchases', purchase.id)" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-orange focus:outline-none">
              Скачать архив
            </a>
            <inertia-link :href="route('setting.purchases')"
                          class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-indigo-300 focus:outline-none"
            >
              Вернуться
            </inertia-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Layout from '@/Shared/Layout.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import PurchaseImages from '@/Shared/Purchase/PurchaseImages.vue'
import PurchaseMusics from '@/Shared/Purchase/PurchaseMusics.vue'
import PurchaseVideos from '@/Shared/Purchase/PurchaseVideos.vue'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'

export default {
    components: {
        MetaHead,
        PurchaseImages,
        PurchaseMusics,
        PurchaseVideos,
        SettingsMenu,
        UserAvatar,
    },
    layout: Layout,

    props: {
        purchase: Object,
        seller: Object,
    },

    computed: {
        currentTypeNode() {
            return 'purchase-' + this.purchase.type
        },
    },
}
</script>
