{{ entry = {collection:plants :slug:is="slug"} }}

{{ if !region || !config:app:bee_friendly_plants:regions[region] || !type || !config:app:bee_friendly_plants:categories[type] || !entry }}
    {{ 404 }}
{{ /if }}

{{ section:seo_title }}
    {{ entry.0.title }}
{{ /section:seo_title }}

{{ partial:components/section extra-padding="true" max-width="lg" class="bee-friendly-plants-flickity-expanded" }}
    <nav class="mb-12 font-bold text-left uppercase font-headline">
        <a href="/do/bee-gardening#regions" class="text-black transition-colors hover:text-black whitespace-nowrap">Bee Gardening3</a> <i class="inline-block mx-1 text-sm fa-solid fa-chevron-right"></i>
        <a href="/do/bee-gardening/regions/{{ region }}" class="text-black transition-colors hover:text-black whitespace-nowrap">{{ config:app:bee_friendly_plants:regions[region] }}</a> <i class="inline-block mx-1 text-sm fa-solid fa-chevron-right"></i>
        <a href="/do/bee-gardening/regions/{{ region }}/{{ type }}" class="text-black transition-colors hover:text-black whitespace-nowrap">{{ config:app:bee_friendly_plants:categories[type] }}</a>
    </nav>

    <div
        class="max-w-2xl mx-auto"
        x-data="{
            flkty: null,
            init() {
                this.flkty = new Flickity(this.$refs.carousel, { wrapAround: true, dynamicHeight: true, initialIndex: this.$refs?.['initial-index']?.getAttribute('data-initial-index') || 0 });

                setTimeout(() => this.handleResize(), 50);
            },
            handleResize() {
                this.flkty.resize();
            }
        }"
        @resize.window="handleResize()"
        x-ref="carousel"
    >
        {{ position = 0 }}
        {{ collection:plants sort="order" }}
            {{ if regions|pluck('key')|in_array(region) AND (category|pluck('key')|in_array(type) OR type === 'all') }}
                <div
                    class="w-full px-8"
                    {{ if entry.0.slug === slug }} x-ref="initial-index" data-initial-index="{{ position }}" {{ /if }}
                >
                    {{ photo }}
                        <figure class="mb-10 bg-center bg-no-repeat bg-cover h-72" style="background-image: url('{{ url }}')">
                            <img src="{{ url }}" alt="{{ url }}" class="w-full h-full opacity-0" />
                            <figcaption class="text-xs text-left">
                                {{ if photo_attribution_url }} <a href="{{ photo_attribution_url }}" target="_blank" class="font-bold text-black transition-colors hover:text-black">Photo</a> {{ /if }}
                                {{ if photo_attribution_text }}by {{ photo_attribution_text }} {{ /if }}
                            </figcaption>
                        </figure>
                    {{ /photo }}

                    <h2 class="text-xl font-bold text-black uppercase font-headline">{{ title }}</h2>

                    {{ partial:components/text-wrapper }}
                        {{ if latin_name }} <p><em>{{ latin_name }}</em></p> {{ /if }}
                        {{ native_regions }}
                            {{ if value === region }}
                                <p class="font-bold">Native to the region</p>
                            {{ /if }}
                        {{ /native_regions }}
                        {{ content|nl2br }}
                    {{ /partial:components/text-wrapper }}
                </div>
                {{ position += 1 }}
            {{ /if }}
        {{ /collection:plants }}
    </div>
{{ /partial:components/section }}