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

{{ section:seo_title }}
    {{ config:app:bee_friendly_plants:categories[type] }}
{{ /section:seo_title }}

{{ partial:components/section extra-padding="true" max-width="lg" }}
    <nav class="mb-4 font-bold text-left uppercase font-headline">
        <a href="/do/bee-gardening#regions" class="text-black transition-colors hover:text-black whitespace-nowrap">Bee Gardening</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>
        <span class="whitespace-nowrap">{{ config:app:bee_friendly_plants:categories[type] }}</span>
    </nav>

    <div
        x-data="{
            bloomingTimes: {
                fall: false,
                winter: false,
                spring: false,
                summer: false
            },

            allElementsHidden: false,

            bloomingTimesSelectedCount() {
                return Object.values(this.bloomingTimes).filter(b => b).length;
            },

            showItem(bloomingTimes) {
                const selectedCount = this.bloomingTimesSelectedCount();
                return selectedCount === 0 || Object.entries(this.bloomingTimes).filter(([key, value]) => value && bloomingTimes.includes(key)).length === selectedCount;
            },

            checkIfAnyVisible() {
                setTimeout(() => {
                    const visibleCount = Array.from(document.querySelectorAll('.plants')).filter(el => window.getComputedStyle(el).display !== 'none').length;

                    this.allElementsHidden = visibleCount === 0;
                }, 200);
            }
        }"
    >
        <div class="mb-4 text-left">
            <span class="inline-block mr-5 text-black font-headline">Blooming Times</span>
            <label class="inline-block mr-3 text-sm"><input type="checkbox" x-model="bloomingTimes.fall" @click="checkIfAnyVisible()" class="mr-0.5" /> Fall</label>
            <label class="inline-block mr-3 text-sm"><input type="checkbox" x-model="bloomingTimes.winter" @click="checkIfAnyVisible()" class="mr-0.5" /> Winter</label>
            <label class="inline-block mr-3 text-sm"><input type="checkbox" x-model="bloomingTimes.spring" @click="checkIfAnyVisible()" class="mr-0.5" /> Late Spring</label>
            <label class="inline-block mr-3 text-sm"><input type="checkbox" x-model="bloomingTimes.summer" @click="checkIfAnyVisible()" class="mr-0.5" /> Summer</label>
        </div>

        <div class="flex flex-wrap justify-center mt-8 -mx-3 -mb-3">
            {{ collection:plants sort="order" }}
                {{ if regions|pluck('key')|in_array(region) AND (category|pluck('key')|in_array(type) OR type === 'all') }}
                    <a
                        href="/do/bee-gardening/regions/{{ region }}/{{ type }}/{{ slug }}"
                        class="flex-grow-0 flex-shrink-0 w-full max-w-xs plants group sm:w-1/3"
                        x-show="showItem({{ blooming_times|pluck('key')|json|replace('"', '\'') }})"
                        x-transition
                    >
                        <div class="p-3">
                            {{ photo }}
                                <div class="overflow-hidden rounded-md">
                                    <img src="{{ url }}" alt="{{ alt }}" class="transition-transform duration-500 group-hover:scale-110" />
                                </div>
                            {{ /photo }}
                            <h3 class="mt-3 text-lg font-bold text-black uppercase transition-colors font-headline group-hover:text-black">
                                {{ title }}
                            </h3>
                        </div>
                    </a>
                {{ /if }}
            {{ /collection:plants }}
        </div>

        <div class="mt-5 text-sm font-bold font-headline" x-show="allElementsHidden" x-transition>
            No plants in this list bloom during the selected period(s).
        </div>
    </div>
{{ /partial:components/section }}