@props([
    'count' => 6,
    'recommendationType' => 'mostPopularLastMonth', // Choose from 'mostPopularLastDay', 'mostPopularLastWeek', 'mostPopularLastMonth'
    'contentTypes' => '', // Choose from one or many content types - e.g 'Podcast, Article'. Defaults to all contentTypes.
    'title' => 'You may also like',
    'isSermon' => '',
    'isMusic' => '',
    'stationId' => '',
    'brandId' => '',
    'onDark' => false
])

<div x-data="{
        recommendations_html: {},
        async getRecommendations() {
            this.recommendations = await fetch('/recommendations-bespoke/{{$recommendationType}}?content_types={{$contentTypes}}&is_music={{$isMusic}}&is_sermon={{$isSermon}}&count={{$count}}&station_id={{$stationId}}&on_dark={{$onDark}}&brand_id={{$brandId}}');
            this.recommendations_html = await this.recommendations.text();
            this.$dispatch('recommendations-updated')
        }
    }"
    x-init="getRecommendations" class="{{ $onDark ? 'bg-black' : '' }}">

    <template x-if="recommendations_html.length && recommendations.status === 200">
        <div class="container-1 py-16 pb-16">
            <h2 class="h2 text-center {{ $onDark ? 'text-white' : '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>

</div>



{{--
    EXAMPLE:
    <x-recommendations.index-bespoke count="5" />
    <x-recommendations.index-bespoke count="3" content-types="Podcast" recommendation-type="mostPopularLastWeek"  />
    <x-recommendations.index-bespoke count="1" content-types="Article,Podcast" recommendation-type="mostPopularLastMonth" is-music="true" is-sermon="true" />
--}}