<script setup>
    import { defineProps } from 'vue';
    import { usePage } from '@inertiajs/vue3';
    import { marked } from 'marked';

    const page = usePage();

    const props = defineProps({
        block: {
            type: Object,
            required: true,
        },
    });
</script>

<template>
    <section class="relative block w-full h-screen overflow-hidden">
        <div class="absolute inset-0 bg-cover" :style="{ backgroundImage: `url('${block.image}')` }"></div>
        <div class="absolute inset-0 bg-black opacity-80"></div>
        <div class="absolute p-12 w-full overflow-auto" style="top: 0; bottom: 0;">
            <div class="flex-row justify-center items-center">
                <h1 class="text-center text-white font-arctic text-2xl md:text-4xl">{{ block.title || 'Medlemskap' }}</h1>
            </div>

            <div class="mx-auto max-w-[1280px]">
                <p v-if="block.showprices" class="mt-2 text-white">
                    Prisen for medlemskap er
                    {{ page.props.pageSettings['membership_fee'] }},- kr per år for voksne eller {{ page.props.pageSettings['membership_child_fee'] }} 
                    for barn/ungdom under {{ page.props.pageSettings['membership_child_age_limit'] }} år. Du må være 
                    {{ page.props.pageSettings['membership_age_limit'] }} år eller eldre for å bli medlem hos oss. Medlemskapet
                    varer i {{ page.props.pageSettings['membership_time_interval_months'] }} måneder
                    <span v-if="page.props.pageSettings['membership_annual']"> eller ut kalenderåret </span>
                    før det må fornyes. Betalinger kan gjøres på nettsiden via vipps <span v-if="page.props.pageSettings['module_stripe_payment']">eller bankkort</span> ved å besøke 
                    <Link :href="route('page-builder.index')" class="text-amber-400 hover:text-amber-300 underline hover:no-underline">
                        din medlemsside
                    </Link>
                    .
                </p>
                <p v-if="$page.props.auth.user && block.showprices" class="mt-2 text-white">
                    <span class="font-semibold">Merk:</span> Priser og betingelser kan variere. Besøk medlemssiden for å se
                    dine spesifike betingelser.
                </p>
                <div class="mt-2 text-white memberShipBlock" v-html="marked(block.text)">
                    
                </div>
            </div>
        </div>
    </section>
</template>