{{ cache key="product_detail_{id}" for="24 hours" }}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">

            <!-- Breadcrumbs -->
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-4">
                    {{ nav:breadcrumbs }}
                    <li class="breadcrumb-item {{ if is_current }} active {{ /if }}"><a href="{{ url }}">{{ title }}</a></li>
                    {{ /nav:breadcrumbs }}
                </ol>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-8">

            <!-- Image Carousel -->
            <div class="owl-carousel owl-theme mb-4" id="product-gallery">
                {{ images }}
                <div class="item">
                    <a href="{{ image }}" data-fancybox="product-gallery">
                        <img src="{{ image }}" alt="Product Image" style="width: 100%">
                    </a>
                </div>
                {{ /images }}
            </div>
        </div>
        <div class="col-12 col-lg-4">
            <div class="row">
                <div class="col-12">

                    <!-- Introductory Text -->
<!--                    <p class="lead mb-4">
                        {{ description }}
                    </p>-->
                </div>
            </div>
            <div class="row">
                <div class="col-12">

                    <!-- Product Characteristics -->
                    <div class="mb-4">
                        <div class="card mb-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12 mb-4">

                                        <!-- Page Title -->
                                        <h1>{{ title }}</h1>
                                        <h6 class="text-muted">{{ type }}</h6>
                                    </div>
                                </div>
                                {{ filters }}
                                    <div>
                                        <b>{{ field.label }}</b>:
                                        {{ if @field.key | is_array }}
                                            {{ @field.key }}
                                                {{ value === 1 ? 'Ja' : 'Nee' }}
                                            {{ /@field.key }}
                                        {{ else }}
                                            {{ @field.key }}
                                        {{ /if }}
                                    </div>
                                {{ /filters }}

                                {{ if youtube_id }}
                                <div class="mt-3">
                                    <iframe 
                                      width="384"
                                      height="216"  
                                      src="https://www.youtube.com/embed/{{ youtube_id }}" 
                                      title="" 
                                      frameborder="0" 
                                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                                      allowfullscreen>
                                    </iframe>
                                </div>
                                {{ /if }}

                                <!-- Wishlist Icon (not cached: per-user state) -->
                                {{ nocache }}
                                <button class="btn btn-outline-success mt-4 add-to-wishlist {{ if {wishlist:exists_in product_id="{id}"} }} d-none {{ /if }}" data-id="{{ id }}">
                                    <i class="fas fa-heart"></i>
                                    <span class="ms-1">Bewaren</span>
                                </button>
                                <button class="btn btn-outline-danger mt-4 remove-from-wishlist {{ if !{wishlist:exists_in product_id="{id}"} }} d-none {{ /if }}" data-id="{{ id }}">
                                    <i class="fas fa-times"></i>
                                    <span class="ms-1">Verwijderen uit wensenlijst</span>
                                </button>
                                {{ /nocache }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card mb-3">
                        <div class="card-body">
                            <h6 class="card-title fw-bold">Vind de beste deal!</h6>

                            <!-- Price Comparison Table -->
                            <div class="table-responsive">
                                <table class="table table-borderless">
                                    <tbody>
                                    {{ collection from="products" :title:contains="page:title" sort="price:asc" limit="10" }}
                                        <tr class="border-top border-end border-start">
                                            <td class="align-middle"><a href="{{ link }}"><img src="{{ glide :src="product_feed.image" width="300" height="300" fit="contain" }}" width="70%" /></a></td>
                                            <td class="align-middle text-nowrap fw-bold">€ {{ price }}</td>
                                            <td class="align-middle">
                                                <div class="d-flex justify-content-end"><a href="{{ link }}"><button class="btn btn-primary">Bekijken</button></a></div></td>
                                        </tr>
                                        <tr class="border-bottom border-end border-start">
                                            <td colspan="3"><div class="text-muted">{{ title }} {{ type }}</div></td>
                                        </tr>
                                        <tr class="pb-3">
                                            <td colspan="3">


                                            </td>
                                        </tr>
                                    {{ /collection }}
                                    <!-- Add more rows as needed -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Related products -->
    <div class="row mt-4">
        <div class="col-12">
            <h3 class="mb-3">Gerelateerde auto's</h3>
            <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-4 g-4">
                {{ collection:products
                    id:not="{ id }"
                    condition:is="{ condition }"
                    gear_system:is="{ gear_system }"
                    fuel_type:is="{ fuel_type }"
                    energy_label:is="{ energy_label }"
                    body_type:is="{ body_type }"
                    number_of_doors:is="{ number_of_doors }"
                    sort="random"
                    limit="4"
                }}
                    {{ partial:partials/product :entry="." show_wishlist="false" }}
                {{ /collection:products }}
            </div>
        </div>
    </div>
</div>
{{ /cache }}