---
// Video Listing template for Benchmarks and Videos

import {
    ensureListingDetails
} from '~/helpers/listing-page.js'

import Heading from '~/src/components/listing-parts/heading.astro'
import RelatedVideos from '~/src/components/listing-parts/related-videos.astro'
import HtmlPlayer from '~/src/components/video/player.astro'


const {
  listing
} = Astro.props

const details = ensureListingDetails( listing )

---
<section class="container pb-16">
    <div class="flex flex-col items-center text-center space-y-6">

        <HtmlPlayer
            video={ details.initialVideo }
        >

            <div
                slot="cover-bottom"
                class="page-heading h-full flex items-end md:p-4"
            >
                <h1 class="title text-xs text-left md:text-2xl font-bold">{ details.initialVideo.name }</h1>
            </div>

        </HtmlPlayer>

        <div class="md:flex w-full justify-between space-y-4 md:space-y-0 md:px-10">

            { details.shouldHaveSubscribeButton &&
                <div
                    class="channel-credit"
                >
                    <a
                        href={`https://www.youtube.com/channel/${ details.initialVideo.channel.id }?sub_confirmation=1`}
                        target="_blank"
                        rel="noopener"
                        role="button"
                        class="relative inline-flex items-center rounded-md px-4 py-2 leading-5 font-bold text-white border border-transparent focus:outline-none focus:border-indigo-600 neumorphic-shadow focus:shadow-outline-indigo bg-darker hover:bg-indigo-400 active:bg-indigo-600 transition duration-150 ease-in-out"
                    >Subscribe to { details.initialVideo.channel.name }</a>
                </div>
             }
        </div>

        <hr class="w-full">

        { details.hasRelatedApps &&
            <div
                class="related-apps w-full"
            >
                <Heading
                    text="📱 Related Apps"
                />
                <div class="featured-apps overflow-x-auto overflow-y-visible whitespace-no-wrap py-2 space-x-2">
                    { details.initialVideo.appLinks.map( appLink => (
                        <a
                            href={ appLink.endpoint }
                            role="button"
                            class="relative items-center leading-5 font-bold text-white border border-transparent focus:outline-none focus:border-indigo-600 neumorphic-shadow-inner bg-darker hover:bg-indigo-400 active:bg-indigo-600 transition duration-150 ease-in-out inline-block text-xs rounded-md px-4 py-2"
                        >{ appLink.name }</a>
                    ) ) }
                </div>
            </div>
        }

        <RelatedVideos
            listing={ listing }
        />

    </div>
</section>
