---
// Default Listing template for Apps, Games, and formulas

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

import Aliases from '~/src/components/listing-parts/aliases.astro'
import RelatedLinks from '~/src/components/listing-parts/related-links.astro'
import Devices from '~/src/components/listing-parts/devices.astro'
import RelatedVideos from '~/src/components/listing-parts/related-videos.astro'
import Bundles from '~/src/components/listing-parts/bundles.astro'

import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'

import { makeLastUpdatedFriendly } from '~/helpers/parse-date'
import { getAppEndpoint } from '~/helpers/app-derived.js'

import LinkButton from '~/components/link-button.vue'
import VideoRow from '~/components/video/row.vue'


const {
  listing
} = Astro.props

const details = new ListingDetails( listing )

---
<section class="container space-y-8 py-32">

    <div class="intro-content flex flex-col items-center text-center min-h-3/4-screen md:min-h-0 gap-8">
        <h1 class="title text-sm md:text-xl font-bold">
            { details.mainHeading }
        </h1>
        <h2 class="subtitle text-2xl md:text-5xl font-bold">
            { details.subtitle }
        </h2>

        <Aliases listing={ listing } />


        <AllUpdatesSubscribe
            client:visible
        />

        <div class="links space-y-6 sm:space-x-6">
            <RelatedLinks
                listing={ listing }
            />
        </div>

        <Devices
            listing={ listing }
        />

        <RelatedVideos
            listing={ listing }
        />

        <Bundles
            listing={ listing }
        />

    </div>

</section>