@props([
    'count' => 6,
    'recommendationType' => 'recent', // Choose from 'trending', 'recent', 'recommended', 'podcasts', 'music', 'sermons'
    'title' => 'You may also like',
    'area' => 'podcasts' // Choose from 'radio', 'music', 'podcasts', and 'sermons'.
])

<div x-data="{
        recommendations_html: {},
        discoveries_html: {},
        async getContent() {
            this.recommendations = await fetch('/recommendations/{{$recommendationType}}?count={{$count}}');
            this.discoveries = await fetch('/discoveries/{{$area}}');

            this.recommendations_html = await this.recommendations.text();
            this.discoveries_html = await this.discoveries.text();

            if(this.recommendations_html.length != 0 && typeof this.recommendations_html !== 'object' ){
                this.recommendationsFetched = true;
            }
        },
        getRecommendationCount(items){
            let parser = new DOMParser();
            let doc = parser.parseFromString(items, 'text/html');
            let count = doc.querySelectorAll('div.feature-card').length;
            return count;
        }
    }" 
    x-init="getContent">

    <template x-if="(recommendations_html.length > 4 && recommendations.status === 200) || (discoveries_html.length > 4 && discoveries.status === 200)">
        <div class="container-1 py-16 grid gap-y-12">

            <template x-if="getRecommendationCount(recommendations_html) > 4 && recommendations.status === 200">
                <div>
                    <h2 class="h2 text-center text-purple pb-12">{{ $title }}</h2>

                    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 md:gap-6 lg:gap-8" x-html="recommendations_html">
                        {{-- Recommendations will show here --}}
                    </div>
                </div>
            </template>

            <template x-if="getRecommendationCount(discoveries_html) > 4">
                <div class="pt-16">
                    <h2 class="h2 text-center text-purple pb-12">Our Picks</h2>

                    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 md:gap-6 lg:gap-8" x-html="discoveries_html">
                        {{-- Discoveries will show here --}}
                    </div>
                </div>
            </template>

        </div>
    </template>

</div>

{{--
    EXAMPLES:
    <x-recommendations.index count="5" title="Discover" recommendation-type="recent" />
    <x-recommendations.index count="3" title="Discover" recommendation-type="trending" />
    <x-recommendations.index count="1" title="Discover" recommendation-type="recommended" />
    <x-recommendations.index count="1" title="Discover" recommendation-type="recommended" area="sermons" />
--}}