---
// 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 ThomasCredit from '~/components/thomas-credit.vue'
import RelatedLinks from '~/src/components/listing-parts/related-links.astro'
import Virtualization from './listing-parts/virtualization.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 GameReports from '~/src/components/listing-parts/game-reports.astro'
import LastUpdated from '~/src/components/listing-parts/last-updated.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">

        <div
            class="title text-sm md:text-xl font-bold"
            set:html={ details.mainHeading }
        />

        <h2 class="subtitle text-2xl md:text-5xl font-bold">
            { details.subtitle }
        </h2>

        { details.isGame && (
            <ThomasCredit />
        )}

        <Aliases listing={ listing } />

        <!-- <AllUpdatesSubscribe
            client:visible
        /> -->

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


        <Virtualization listing={ listing } />

        <Devices
            listing={ listing }
        />

        <RelatedVideos
            listing={ listing }
        />

    </div>

    <Bundles
        listing={ listing }
    />

    <GameReports
        listing={ listing }
    />

    <LastUpdated
        listing={ listing }
    />

</section>