{{ get_content from="/dvla-number-plates" }}
{{ dvla :vrn="vrn"}}
<main class="standard-page">
    {{ partial:top }}
    <section class="relative py-16 bg-gray-300">
        <div class="container mx-auto px-4">
            <div
                class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg -mt-64">
                <div class="p-2 sm:p-6">
                    <div class="mt-5">
                        <div class="flex flex-wrap">
                            <div class="w-full">
                                <div class="mb-4 text-lg leading-relaxed text-gray-800">

                                    <div class="text-center">
                                        {{ partial:registration vrn="{{ title }}" price="{{ price }}" slug="{{ url}}" }}
                                    </div>
                                    <div class="flex mt-12 flex-wrap">
                                        <div class="w-full  mt-6">
                                            <table class="border-0 m-auto">
                                                <tr>
                                                    <th class="text-left">Registration: </th>
                                                    <td class="text-right text-2xl font-bold">{{ title }}</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-left">Price: </th>
                                                    <td class="text-right">&pound; {{ price format_number="2"}}</td>
                                                </tr>
                                                {{ if vat }}
                                                    <tr>
                                                        <th class="text-left">VAT: </th>
                                                        <td class="text-right">&pound; {{ vat format_number="2"}}</td>
                                                    </tr>
                                                {{ /if }}
                                                <tr>
                                                    <th class="text-left">DoT Transfer Fee: </th>
                                                    <td class="text-right">&pound; {{ dot format_number="2"}}</td>
                                                </tr>
                                                <tr>
                                                    <th  class="text-left">Total: </th>
                                                    <td class="text-right">&pound; {{ total_price format_number="2" }}</td>
                                                </tr>
                                            </table>
                                            <div class="my-6">
                                                {{ if date_issued }}
                                                   <div class="border-black border-solid border-2 p-8 m-6">
                                                       This registration can only be assigned to a vehicle which was
                                                       registered as new on or after <b> {{ date_issued }} </b>
                                                   </div>
                                                {{ /if }}

                                                {{ if enquiryOnly }}
                                                   {{ partial:enquiry vrn="{{ title }}" price="{{ price }}" title="no" slug="{{ url}}" }}
                                                {{ /if }}
                                                {{ content }}
                                            </div>

                                            {{ if !enquiryOnly }}
                                            <div x-data="cartHandler()" class="border-t border-gray-200 py-4 flex justify-between
                                            items-center" >
                                                <div class="mb-4">
                                                    <div x-text="formData.message"></div>
                                                </div>

                                                <div class="m-auto">
                                                    <button type="button" @click.prevent="submitData"
                                                            class="bg-green-600 hover:bg-green-900 text-gray-200 font-semibold px-4 py-2 cursor-pointer">
                                                        Add to Cart
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="sharethis-inline-share-buttons"></div>
                                            {{ /if }}

<!--
                                            {{ reg_tags as="tags" }}
                                            {{ ! no_result }}
                                                <p>We think this registration should be found under these searches. To see
                                                    other
                                                    registrations that match these searches, click a link below:</p>
                                                {{ tags }}
                                                <a href="{{ url}}">{{ title }}</a>
                                                {{ /tags }}
                                            {{ /no_result }}
                                            {{ /reg_tags }}
-->

                                            {{ registration_detail:standard_content }}

                                        </div>

                                    </div>


                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<script>
    function cartHandler() {
        return {
            formData: {
                slug: '{{ slug }}'
            },

            submitData() {
                this.message = ''

                fetch('/add-to-cart', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(this.formData)
                })
                    .then(() => {
                        location.href="/cart";
                    })
                    .catch(() => {
                        this.message = 'Ooops! Something went wrong!'
                    })
            }
        }
    }
</script>
{{ /dvla }}
{{/get_content}}