{"version":3,"file":"TrackInformation-cf43a57e.js","sources":["../../../resources/js/Components/TrackEntryFeeFormModal.vue","../../../resources/js/Pages/TrackPublic/TrackInformation.vue"],"sourcesContent":["<script setup>\nimport DialogModal from \"../Components/DialogModal.vue\";\nimport { useForm } from \"@inertiajs/vue3\";\nimport { onMounted, onUnmounted, reactive, computed } from \"vue\";\nimport eventBus from \"@/Helpers/eventBus\";\nimport Button from \"../Components/Button.vue\";\nimport FormInput from \"@/Components/FormInput.vue\";\nimport JetCheckbox from \"@/Components/Checkbox.vue\";\nimport TooltipIcon from \"@/Components/TooltipIcon.vue\";\nimport JetLabel from \"@/Components/InputLabel.vue\";\nimport { getCurrencySymbol, round } from \"../Helpers/helperFunctions\";\nimport { usePage } from \"@inertiajs/vue3\";\nimport InputError from \"@/Components/InputError.vue\";\nimport Checkbox from \"@/Components/Checkbox.vue\";\nimport InputLabel from \"@/Components/InputLabel.vue\";\n\nconst props = defineProps({});\n\nconst modal = reactive({\n    show: false,\n});\nconst form = useForm({\n    full_name: null,\n    address: null,\n    country: null,\n    is_company: false,\n    company_name: null,\n    company_number: null,\n    vat_number: null,\n    terms: false,\n});\n\nfunction showModal(formData) {\n    modal.show = true;\n\n    if (formData) {\n        Object.assign(form, formData);\n    }\n}\n\nfunction closeModal() {\n    //console.log(arguments);\n    modal.show = false;\n    form.reset();\n    form.clearErrors();\n}\n\nonMounted(() => {\n    // console.log(\"onMounted CompetitorFormModal\");\n    eventBus.$on(\"showTrackEntryFeeFormModal\", (argsObj) => {\n        showModal(argsObj.formData);\n    });\n});\n\nonUnmounted(() => {\n    // console.log(\"onUnmounted CompetitorFormModal\");\n    eventBus.$off(\"showTrackEntryFeeFormModal\");\n});\n\nconst vatPercentage = computed(() => {\n    if (form.country === \"LV\") {\n        return 21;\n    }\n\n    if (usePage().props.app.countryCodesInEU.includes(form.country)) {\n        // in EU\n\n        if (form.is_company && form.vat_number) {\n            return 0;\n        }\n\n        return 21;\n    }\n\n    // not EU country\n    return 0;\n});\n\nconst vatAmount = computed(() => {\n    return round((usePage().props.track.t_entry_fee * vatPercentage.value) / 121, 2);\n\n    // const amount = usePage().props.track.t_entry_fee * (vatPercentage.value / 100);\n    // return Math.round((amount + Number.EPSILON) * 100) / 100;\n});\n\nconst totalToPay = computed(() => {\n    const amount = usePage().props.track.t_entry_fee;\n    return Math.round((amount + Number.EPSILON) * 100) / 100;\n});\n\nfunction payWithStripeNow() {\n    form.post(\n        route(\"track.public.pay-with-stripe-now\", {\n            pin: usePage().props.track.pin,\n            seo_slug: usePage().props.track.seo_slug,\n        }),\n        {\n            preserveScroll: true,\n            onSuccess: () => closeModal(),\n        },\n    );\n}\n</script>\n\n<template>\n    <DialogModal\n        :show=\"modal.show\"\n        @close=\"closeModal()\"\n    >\n        <template #title> Access this track</template>\n\n        <template #content>\n            <div\n                v-if=\"!$page.props.user\"\n                class=\"mt-4 space-y-3\"\n            >\n                Please\n                <a\n                    target=\"_top\"\n                    :href=\"`/after-auth-intended-track-route/${$page.props.track.pin}/track.public.information`\"\n                    >Log in</a\n                >\n                to access this track.\n            </div>\n\n            <form\n                v-else\n                class=\"space-y-4\"\n            >\n                <div class=\"col-span-6 sm:col-span-4\">Payer information for the entry fee invoice:</div>\n\n                <div class=\"col-span-6 sm:col-span-4\">\n                    <FormInput\n                        v-model=\"form.email\"\n                        label=\"Email\"\n                        type=\"text\"\n                        disabled\n                        :error=\"form.errors.email\"\n                    ></FormInput>\n                </div>\n\n                <div class=\"col-span-6 sm:col-span-4\">\n                    <FormInput\n                        v-model=\"form.full_name\"\n                        label=\"Full name\"\n                        type=\"text\"\n                        :error=\"form.errors.full_name\"\n                    ></FormInput>\n                </div>\n\n                <div class=\"col-span-6 sm:col-span-4\">\n                    <FormInput\n                        v-model=\"form.country\"\n                        type=\"select\"\n                        label=\"Country\"\n                        :error=\"form.errors.country\"\n                        :options=\"$page.props.app.countries\"\n                    />\n                </div>\n\n                <div class=\"col-span-6 sm:col-span-4\">\n                    <FormInput\n                        v-model=\"form.address\"\n                        label=\"Full address\"\n                        type=\"text\"\n                        :error=\"form.errors.address\"\n                    ></FormInput>\n                </div>\n\n                <div class=\"col-span-6 sm:col-span-4\">\n                    <JetLabel>\n                        <div class=\"flex items-center\">\n                            <JetCheckbox v-model:checked=\"form.is_company\" />\n                            <div class=\"ml-2\">Entry fee paid by company</div>\n                        </div>\n                    </JetLabel>\n                </div>\n\n                <div\n                    v-if=\"form.is_company\"\n                    class=\"space-y-4\"\n                >\n                    <div class=\"col-span-6 sm:col-span-4\">\n                        <FormInput\n                            v-model=\"form.company_name\"\n                            label=\"Company name\"\n                            type=\"text\"\n                            :error=\"form.errors.company_name\"\n                        ></FormInput>\n                    </div>\n\n                    <div class=\"col-span-6 sm:col-span-4\">\n                        <FormInput\n                            v-model=\"form.company_number\"\n                            label=\"Company registration number\"\n                            type=\"text\"\n                            :error=\"form.errors.company_number\"\n                        ></FormInput>\n                    </div>\n\n                    <div class=\"col-span-6 sm:col-span-4\">\n                        <FormInput\n                            v-model=\"form.vat_number\"\n                            label=\"Company VAT number\"\n                            type=\"text\"\n                            :error=\"form.errors.vat_number\"\n                        ></FormInput>\n                    </div>\n                </div>\n\n                <hr />\n\n                <InputLabel for=\"terms\">\n                    <div class=\"flex items-center\">\n                        <Checkbox\n                            id=\"terms\"\n                            v-model:checked=\"form.terms\"\n                            name=\"terms\"\n                            required\n                        />\n\n                        <div class=\"ml-2\">\n                            I agree to the\n                            <a\n                                target=\"_blank\"\n                                :href=\"route('terms.show')\"\n                                class=\"text-sm\"\n                                >Terms of Service</a\n                            >\n                            and\n                            <a\n                                target=\"_blank\"\n                                :href=\"route('policy.show')\"\n                                class=\"text-sm\"\n                                >Privacy Policy</a\n                            >\n                        </div>\n                    </div>\n                    <InputError\n                        class=\"mt-2\"\n                        :message=\"form.errors.terms\"\n                    />\n                </InputLabel>\n\n                <div class=\"space-y-4 border-t pt-4 text-right tabular-nums\">\n                    <div class=\"space-y-4\">\n                        Track entry fee (for {{ $page.props.track.access_duration_days }} days):\n                        {{ getCurrencySymbol($page.props.track.t_entry_fee_currency)\n                        }}{{ $page.props.track.t_entry_fee.toFixed(2) }}\n                    </div>\n                    <!--                    <div class=\"space-y-4\">\n                        VAT ({{ vatPercentage }}%):\n                        {{ getCurrencySymbol($page.props.track.t_entry_fee_currency)\n                        }}{{ vatAmount.toFixed(2) }}\n                    </div>-->\n                    <div class=\"space-y-4 font-semibold\">\n                        Total: {{ getCurrencySymbol($page.props.track.t_entry_fee_currency)\n                        }}{{ totalToPay.toFixed(2) }}\n                    </div>\n                </div>\n            </form>\n        </template>\n\n        <template #footer>\n            <Button\n                color=\"white\"\n                @click=\"closeModal()\"\n            >\n                Cancel\n            </Button>\n\n            <Button\n                v-if=\"$page.props.user\"\n                class=\"ml-3\"\n                :class=\"{ 'opacity-25': form.processing }\"\n                :disabled=\"form.processing\"\n                @click=\"payWithStripeNow()\"\n            >\n                Pay with Stripe now\n            </Button>\n        </template>\n    </DialogModal>\n</template>\n","<script lang=\"ts\" setup>\nimport { Head, Link } from \"@inertiajs/vue3\";\nimport HeadingComponent from \"../../Components/HeadingComponent.vue\";\nimport {\n    entityDecoder,\n    formatTrackDistanceHuman,\n    formatTrackSpeedLimitHuman,\n    formatUnitsHuman,\n    getCurrencySymbol,\n    getDeviceNavigationAppUrl,\n    linkify,\n} from \"@/Helpers/helperFunctions.js\";\nimport { onMounted, onUnmounted, reactive, ref } from \"vue\";\nimport \"/node_modules/flag-icons/css/flag-icons.min.css\";\nimport { DateTime } from \"luxon\";\nimport { PencilIcon } from \"@heroicons/vue/20/solid\";\nimport { usePage } from \"@inertiajs/vue3\";\nimport TrackEntryFeeFormModal from \"../../Components/TrackEntryFeeFormModal.vue\";\nimport { Event } from \"@/types\";\n\ninterface Props {\n    track: Event;\n    userOrder: object | null;\n    track_is_processing: boolean;\n}\n\nimport { ArrowTopRightOnSquareIcon } from \"@heroicons/vue/24/solid/index.js\";\n\nimport TrackPublicWrapper from \"@/Pages/TrackPublic/TrackPublicWrapper.vue\";\nimport TrackPublicMap from \"@/Pages/TrackPublic/Components/TrackPublicMap.vue\";\nimport Modal from \"@/Components/Modal.vue\";\nimport Button from \"@/Components/Button.vue\";\nimport TooltipIcon from \"@/Components/TooltipIcon.vue\";\nimport eventBus from \"@/Helpers/eventBus\";\nimport TrackDownload from \"@/Components/TrackDownload.vue\";\nimport SendMessageModal from \"@/Components/SendMessageModal.vue\";\nimport RoadbookIcon from \"@/Components/assets/RoadbookIcon.vue\";\nimport GPXIcon from \"@/Components/assets/GPXIcon.vue\";\n\nconst props = withDefaults(defineProps<Props>(), {});\n\nonMounted(() => {});\n\nonUnmounted(() => {});\n\nconst myImageModalProps = reactive({\n    modalImageSrc: \"\",\n    showModal: false,\n});\n\nfunction showImageModal(src) {\n    myImageModalProps.modalImageSrc = src;\n    myImageModalProps.showModal = true;\n}\n\nfunction closeImageModal() {\n    myImageModalProps.showModal = false;\n}\n\nfunction showTrackEntryFeeFormModal() {\n    eventBus.$emit(\"showTrackEntryFeeFormModal\", {\n        formData: {\n            full_name: usePage().props.user?.name,\n            email: usePage().props.user?.email,\n            country: usePage().props.user?.country,\n        },\n    });\n}\n\nfunction showSendMessageModal() {\n    if (!usePage().props.user?.email) {\n        alert(\"Please log in to send a message to the track creator/owner!\");\n        return;\n    }\n\n    eventBus.$emit(\"showSendMessageModal\");\n}\n</script>\n\n<template>\n    <TrackPublicWrapper>\n        <Head>\n            <title>Track: {{ $page.props.track.name }}</title>\n\n            <meta\n                property=\"og:title\"\n                head-key=\"og:title\"\n                :content=\"`Track: ${$page.props.meta_track_name}`\"\n            />\n\n            <meta\n                name=\"description\"\n                head-key=\"description\"\n                :content=\"`Track information: ${$page.props.meta_track_name}`\"\n            />\n            <meta\n                property=\"og:description\"\n                :content=\"`Track information: ${$page.props.meta_track_name}`\"\n            />\n        </Head>\n        <div class=\"flex w-full md:max-w-xl lg:basis-2/3 xl:basis-1/2 2xl:basis-2/5\">\n            <div class=\"w-full space-y-4\">\n                <div\n                    v-if=\"track_is_processing\"\n                    class=\"mb-4 rounded-lg border border-red-300 bg-red-50 p-4 text-red-800\"\n                    role=\"alert\"\n                >\n                    <div class=\"flex items-center\">\n                        <svg\n                            class=\"-ml-1 mr-3 size-12 animate-spin\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                        >\n                            <circle\n                                class=\"opacity-25\"\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"10\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"4\"\n                            ></circle>\n                            <path\n                                class=\"opacity-75\"\n                                fill=\"currentColor\"\n                                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n                            ></path>\n                        </svg>\n                        <span class=\"sr-only\">Info</span>\n                        <h3 class=\"text-lg font-medium\">This Track is currently processing....</h3>\n                    </div>\n                    <div class=\"mt-2 text-sm\">Please wait a couple of seconds and refresh the page</div>\n                </div>\n                <div\n                    v-if=\"track.visibility === 'private'\"\n                    class=\"mb-4 rounded-lg border border-red-300 bg-red-50 p-4 text-red-800\"\n                    role=\"alert\"\n                >\n                    <div class=\"flex items-center\">\n                        <svg\n                            class=\"me-2 size-4 shrink-0\"\n                            aria-hidden=\"true\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            fill=\"currentColor\"\n                            viewBox=\"0 0 20 20\"\n                        >\n                            <path\n                                d=\"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z\"\n                            />\n                        </svg>\n                        <span class=\"sr-only\">Info</span>\n                        <h3 class=\"text-lg font-medium\">\n                            This Track is currently private. Only the Track owner and team administrators can\n                            access this page.\n                        </h3>\n                    </div>\n                    <div class=\"mt-2 text-sm\">\n                        Once you are satisfied with all details, you can choose to make the Track public or\n                        unlisted.\n                    </div>\n                    <div\n                        v-if=\"track.event_id\"\n                        class=\"mt-2 text-sm\"\n                    >\n                        Event tracks, regardless of their visibility status, are exclusively accessible to\n                        \"accepted\" event competitors according to their scheduled date and time, and section\n                        settings.\n                    </div>\n                </div>\n\n                <div\n                    v-if=\"track.event_id\"\n                    class=\"mb-4 rounded-lg border border-blue-300 bg-blue-50 p-4 text-blue-800\"\n                    role=\"alert\"\n                >\n                    <div class=\"flex items-center\">\n                        <svg\n                            class=\"me-2 size-4 shrink-0\"\n                            aria-hidden=\"true\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            fill=\"currentColor\"\n                            viewBox=\"0 0 20 20\"\n                        >\n                            <path\n                                d=\"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z\"\n                            />\n                        </svg>\n                        <span class=\"sr-only\">Info</span>\n                        <h3 class=\"text-lg font-medium\">This Track belongs to the Event</h3>\n                    </div>\n                    <div class=\"mt-2 text-sm\">\n                        <Link\n                            :href=\"\n                                route('event.public.information', {\n                                    hashid: track.event.hashid,\n                                    seo_slug: track.event.seo_slug,\n                                })\n                            \"\n                        >\n                            {{ track.event.name }}\n                        </Link>\n                    </div>\n                </div>\n\n                <div\n                    v-if=\"track.event_id\"\n                    class=\"mb-4 rounded-lg border border-blue-300 bg-blue-50 p-4 text-blue-800\"\n                    role=\"alert\"\n                >\n                    <div class=\"flex items-center\">\n                        <svg\n                            class=\"me-2 size-4 shrink-0\"\n                            aria-hidden=\"true\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            fill=\"currentColor\"\n                            viewBox=\"0 0 20 20\"\n                        >\n                            <path\n                                d=\"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z\"\n                            />\n                        </svg>\n                        <span class=\"sr-only\">Info</span>\n                        <h3 class=\"text-lg font-medium\">\n                            Event organizers (and anyone else with a link or PIN) can easily test-ride this\n                            track before the event. Replays, leaderboards, and any penalties incurred will be\n                            available for you to analyze independently of event results. Learn more:\n                            <a href=\"/faq/how-to-test-ride-event-tracks-and-itinerary-15\"\n                                >How to test-ride event tracks?</a\n                            >\n                        </h3>\n                    </div>\n                </div>\n\n                <HeadingComponent class=\"rounded-lg bg-white p-4 shadow-lg sm:px-6\">\n                    <template #name>\n                        Track information&nbsp;<span\n                            class=\"inline-flex rounded-full px-2 text-sm font-semibold\"\n                            :class=\"{\n                                'bg-green-100 text-green-800': track.visibility === 'public',\n                                'bg-red-100 text-red-800': track.visibility === 'private',\n                                'bg-slate-100 text-slate-800': track.visibility === 'unlisted',\n                            }\"\n                        >\n                            {{ track.visibility }}</span\n                        >\n                        {{\n                            $page.props.user && $page.props.user.can_impersonate\n                                ? ` (track_id: ${$page.props.track.id} track_version_id: ${$page.props.track.latestVersion.id} user_id: ${$page.props.track.user_id})`\n                                : \"\"\n                        }}\n                    </template>\n                    <template #description>{{ track.name }} (v.{{ track.latestVersion.version }})</template>\n                </HeadingComponent>\n                <HeadingComponent\n                    v-if=\"$page.props.can.update_track\"\n                    class=\"rounded-lg bg-orange-50 p-4 shadow-lg sm:px-6\"\n                >\n                    <template #name>Track owner tools</template>\n                    <template #description>\n                        <div class=\"space-x-4 pt-4\">\n                            <Button\n                                :href=\"\n                                    route('track.edit.general', {\n                                        pin: $page.props.track.pin,\n                                        seo_slug: $page.props.track.seo_slug,\n                                    })\n                                \"\n                                class=\"h-6\"\n                                variant=\"outline\"\n                            >\n                                <PencilIcon\n                                    class=\"-ml-0.5 mr-1.5 size-4\"\n                                    aria-hidden=\"true\"\n                                />\n                                Edit general info\n                            </Button>\n                        </div>\n                    </template>\n                </HeadingComponent>\n\n                <div\n                    v-if=\"!track_is_processing\"\n                    class=\"flex flex-col\"\n                >\n                    <div class=\"overflow-hidden rounded-lg bg-white shadow-lg\">\n                        <div class=\"border-t border-gray-100\">\n                            <dl class=\"divide-y divide-gray-100\">\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">Navigation by</dt>\n                                    <dd\n                                        class=\"mt-1 text-sm capitalize leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        <RoadbookIcon\n                                            v-if=\"track.navigate_by === 'rb'\"\n                                            class=\"inline size-5\"\n                                        ></RoadbookIcon>\n                                        <GPXIcon\n                                            v-if=\"track.navigate_by === 'gpx'\"\n                                            class=\"inline size-5\"\n                                        ></GPXIcon>\n                                        &nbsp;{{ track.navigate_by === \"rb\" ? \"Roadbook\" : \"GPX trail\" }}\n                                    </dd>\n                                </div>\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">Entry fee</dt>\n                                    <dd\n                                        v-if=\"track.pricing !== 'paid'\"\n                                        class=\"mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        Free\n                                    </dd>\n                                    <dd\n                                        v-if=\"track.pricing === 'paid'\"\n                                        class=\"mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        {{ getCurrencySymbol(track.t_entry_fee_currency)\n                                        }}{{ track.t_entry_fee.toFixed(2) }} for\n                                        {{ track.access_duration_days }}\n                                        {{\n                                            track.access_duration_days.toString()[\n                                                track.access_duration_days.toString().length - 1\n                                            ] == \"1\"\n                                                ? \"day\"\n                                                : \"days\"\n                                        }}\n                                        <TooltipIcon classes=\"size-5\">\n                                            <div class=\"max-w-sm\">\n                                                How many days will the track be available to ride:<br />\n                                                <br />\n                                                <strong\n                                                    >You can pay the entry fee now and ride the track later. The\n                                                    track access duration period begins only when you download\n                                                    it in the RBR app.</strong\n                                                >\n                                                <br />\n                                                <br />\n                                                You can ride the track as many times as you want during this\n                                                period.<br />\n                                                <br />\n                                                All rides/attempts will be timed, analyzed, and included in the\n                                                leaderboard and replay.<br />\n                                                <br />\n                                                You can press the \"restart\" button in the app to start the track\n                                                again. It is possible to mask your ride identification info from\n                                                the leaderboard and replay.\n                                                <br />\n                                                <br />\n                                                P.S. Unused entries and entry fees will expire four months after\n                                                the entry fee payment.\n                                            </div>\n                                        </TooltipIcon>\n                                        &nbsp;\n                                        <Button\n                                            class=\"h-6\"\n                                            @click=\"showTrackEntryFeeFormModal()\"\n                                            >Pay now\n                                        </Button>\n                                    </dd>\n                                </div>\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">\n                                        PIN\n                                        <TooltipIcon\n                                            classes=\"size-5\"\n                                            href=\"/faq/what-is-a-trackroadbook-pin-code-1\"\n                                        >\n                                            What is a Track PIN code?\n                                        </TooltipIcon>\n                                    </dt>\n                                    <dd class=\"mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0\">\n                                        <span :title=\"track.id\">{{ track.pin }}</span\n                                        >&nbsp;\n                                        <TrackDownload\n                                            :track=\"track\"\n                                            :user_order=\"$page.props.userOrder\"\n                                        />\n                                    </dd>\n                                </div>\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">Description</dt>\n                                    <dd\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        <article\n                                            class=\"prose whitespace-pre-wrap break-words\"\n                                            v-html=\"linkify(entityDecoder(track.description))\"\n                                        ></article>\n                                    </dd>\n                                </div>\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">Track creator</dt>\n                                    <dd class=\"mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0\">\n                                        {{\n                                            track.user && track.user.track_creator_brand\n                                                ? track.user.track_creator_brand\n                                                : \"-\"\n                                        }}\n                                        &nbsp;\n                                        <Button\n                                            class=\"h-6\"\n                                            @click=\"showSendMessageModal()\"\n                                            >Send message\n                                        </Button>\n                                    </dd>\n                                </div>\n                                <div\n                                    v-if=\"track.country_full\"\n                                    class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\"\n                                >\n                                    <dt class=\"text-sm font-medium text-gray-900\">Country</dt>\n                                    <dd\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        <template v-if=\"track.country\">\n                                            <span\n                                                :class=\"`border text-xl fi fi-${track.country.toLowerCase()}`\"\n                                            ></span>\n                                            &nbsp;\n                                            {{ track.country_full }}\n                                        </template>\n                                    </dd>\n                                </div>\n                                <div\n                                    v-if=\"track.latestVersion.start_location\"\n                                    class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\"\n                                >\n                                    <dt class=\"text-sm font-medium text-gray-900\">Start location</dt>\n                                    <dd\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        <a\n                                            :href=\"\n                                                getDeviceNavigationAppUrl(track.latestVersion.start_location)\n                                            \"\n                                            target=\"_blank\"\n                                        >\n                                            {{\n                                                track.latestVersion.start_location.coordinates\n                                                    .join(\",\")\n                                                    .split(\",\")\n                                                    .reverse()\n                                                    .join(\", \")\n                                            }}\n                                            <ArrowTopRightOnSquareIcon\n                                                class=\"inline size-5\"\n                                            ></ArrowTopRightOnSquareIcon>\n                                        </a>\n                                    </dd>\n                                </div>\n                                <div\n                                    v-if=\"track.latestVersion.end_location\"\n                                    class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\"\n                                >\n                                    <dt class=\"text-sm font-medium text-gray-900\">End location</dt>\n                                    <dd\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        <a\n                                            :href=\"getDeviceNavigationAppUrl(track.latestVersion.end_location)\"\n                                            target=\"_blank\"\n                                        >\n                                            {{\n                                                track.latestVersion.end_location.coordinates\n                                                    .join(\",\")\n                                                    .split(\",\")\n                                                    .reverse()\n                                                    .join(\", \")\n                                            }}\n                                            <ArrowTopRightOnSquareIcon\n                                                class=\"inline size-5\"\n                                            ></ArrowTopRightOnSquareIcon>\n                                        </a>\n                                    </dd>\n                                </div>\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">Units</dt>\n                                    <dd\n                                        v-if=\"track.units\"\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        {{ formatUnitsHuman(track.units) }}\n                                    </dd>\n                                </div>\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">Length</dt>\n                                    <dd\n                                        v-if=\"track.latestVersion.distance > 0\"\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        {{ formatTrackDistanceHuman(track) }}\n                                    </dd>\n                                </div>\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">\n                                        {{ track.navigate_by === \"gpx\" ? \"Waypoints\" : \"Instructions\" }}\n                                    </dt>\n                                    <dd\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        {{ track.latestVersion.classSectionIndividual.instructions_count }}\n                                    </dd>\n                                </div>\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">Speed limit</dt>\n                                    <dd\n                                        v-if=\"track.latestVersion.distance > 0\"\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        {{ formatTrackSpeedLimitHuman(track) }}\n                                    </dd>\n                                </div>\n                                <!--                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">\n                                        Maximum time allowed\n                                        <TooltipIcon\n                                            classes=\"size-5\"\n                                            href=\"/faq/track-leaderboard-66\"\n                                        >\n                                            What is the maximum time allowed?\n                                        </TooltipIcon>\n                                    </dt>\n                                    <dd\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        ccc\n                                    </dd>\n                                </div>-->\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">Updated at</dt>\n                                    <dd\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        {{ new Date(track.latestVersion.updated_at).toLocaleDateString() }}\n                                        (v.{{ track.latestVersion.version }})\n                                        <br />\n                                        ({{ DateTime.fromISO(track.latestVersion.updated_at).toRelative() }})\n                                    </dd>\n                                </div>\n                                <div class=\"p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6\">\n                                    <dt class=\"text-sm font-medium text-gray-900\">Created at</dt>\n                                    <dd\n                                        class=\"mt-1 text-sm tabular-nums leading-6 text-gray-700 sm:col-span-2 sm:mt-0\"\n                                    >\n                                        {{ new Date(track.created_at).toLocaleDateString() }}\n                                        <br />\n                                        ({{ DateTime.fromISO(track.created_at).toRelative() }})\n                                    </dd>\n                                </div>\n                            </dl>\n                        </div>\n                    </div>\n                </div>\n\n                <div\n                    v-if=\"$page.props.entity_images.length > 0\"\n                    class=\"h-auto max-w-full rounded-lg border bg-white p-3 shadow-lg sm:p-4\"\n                >\n                    <div class=\"space-y-4\">\n                        <img\n                            v-for=\"logo in $page.props.entity_images\"\n                            :key=\"logo\"\n                            :src=\"logo\"\n                            class=\"cursor-pointer rounded-md\"\n                            alt=\"Track poster\"\n                            @click=\"showImageModal(logo)\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <Modal\n            :show=\"myImageModalProps.showModal\"\n            max-width=\"min\"\n            @close=\"closeImageModal\"\n        >\n            <div @click=\"closeImageModal()\">\n                <img\n                    :src=\"myImageModalProps.modalImageSrc\"\n                    class=\"max-h-full rounded border bg-white p-1 shadow-lg sm:max-h-screen sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg\"\n                />\n            </div>\n        </Modal>\n\n        <template #map>\n            <TrackPublicMap\n                v-if=\"$page.props.track.latestVersion.distance > 0\"\n                class=\"content-full-screen-height-mt-4 hidden flex-1 rounded-lg bg-white shadow-lg lg:flex\"\n            />\n        </template>\n\n        <TrackEntryFeeFormModal></TrackEntryFeeFormModal>\n        <SendMessageModal\n            v-if=\"usePage().props.user\"\n            entity-name=\"track\"\n        ></SendMessageModal>\n    </TrackPublicWrapper>\n</template>\n"],"names":["modal","reactive","form","useForm","showModal","formData","closeModal","onMounted","eventBus","argsObj","onUnmounted","vatPercentage","computed","usePage","round","totalToPay","amount","payWithStripeNow","myImageModalProps","showImageModal","src","closeImageModal","showTrackEntryFeeFormModal","showSendMessageModal"],"mappings":"0iGAkBA,MAAMA,EAAQC,EAAS,CACnB,KAAM,EACV,CAAC,EACKC,EAAOC,EAAQ,CACjB,UAAW,KACX,QAAS,KACT,QAAS,KACT,WAAY,GACZ,aAAc,KACd,eAAgB,KAChB,WAAY,KACZ,MAAO,EACX,CAAC,EAED,SAASC,EAAUC,EAAU,CACzBL,EAAM,KAAO,GAETK,GACA,OAAO,OAAOH,EAAMG,CAAQ,CAEpC,CAEA,SAASC,GAAa,CAElBN,EAAM,KAAO,GACbE,EAAK,MAAK,EACVA,EAAK,YAAW,CACpB,CAEAK,EAAU,IAAM,CAEZC,EAAS,IAAI,6BAA+BC,GAAY,CACpDL,EAAUK,EAAQ,QAAQ,CAClC,CAAK,CACL,CAAC,EAEDC,EAAY,IAAM,CAEdF,EAAS,KAAK,4BAA4B,CAC9C,CAAC,EAED,MAAMG,EAAgBC,EAAS,IACvBV,EAAK,UAAY,KACV,GAGPW,EAAO,EAAG,MAAM,IAAI,iBAAiB,SAASX,EAAK,OAAO,EAGtDA,EAAK,YAAcA,EAAK,WACjB,EAGJ,GAIJ,CACV,EAEiBU,EAAS,IAChBE,EAAOD,EAAS,EAAC,MAAM,MAAM,YAAcF,EAAc,MAAS,IAAK,CAAC,CAIlF,EAED,MAAMI,EAAaH,EAAS,IAAM,CAC9B,MAAMI,EAASH,EAAO,EAAG,MAAM,MAAM,YACrC,OAAO,KAAK,OAAOG,EAAS,OAAO,SAAW,GAAG,EAAI,GACzD,CAAC,EAED,SAASC,GAAmB,CACxBf,EAAK,KACD,MAAM,mCAAoC,CACtC,IAAKW,EAAO,EAAG,MAAM,MAAM,IAC3B,SAAUA,EAAO,EAAG,MAAM,MAAM,QAC5C,CAAS,EACD,CACI,eAAgB,GAChB,UAAW,IAAMP,EAAY,CAChC,CACT,CACA,qiNC5DAC,EAAU,IAAM,CAAA,CAAE,EAElBG,EAAY,IAAM,CAAA,CAAE,EAEpB,MAAMQ,EAAoBjB,EAAS,CAC/B,cAAe,GACf,UAAW,EAAA,CACd,EAED,SAASkB,EAAeC,EAAK,CACzBF,EAAkB,cAAgBE,EAClCF,EAAkB,UAAY,EAClC,CAEA,SAASG,GAAkB,CACvBH,EAAkB,UAAY,EAClC,CAEA,SAASI,GAA6B,WAClCd,EAAS,MAAM,6BAA8B,CACzC,SAAU,CACN,WAAWK,EAAAA,EAAA,EAAU,MAAM,OAAhBA,YAAAA,EAAsB,KACjC,OAAOA,EAAAA,EAAA,EAAU,MAAM,OAAhBA,YAAAA,EAAsB,MAC7B,SAASA,EAAAA,EAAA,EAAU,MAAM,OAAhBA,YAAAA,EAAsB,OACnC,CAAA,CACH,CACL,CAEA,SAASU,GAAuB,OAC5B,GAAI,GAACV,EAAAA,EAAU,EAAA,MAAM,OAAhBA,MAAAA,EAAsB,OAAO,CAC9B,MAAM,6DAA6D,EACnE,MACJ,CAEAL,EAAS,MAAM,sBAAsB,CACzC"}