{{ banner |dump}}
<div x-data="state" x-init="fetchItems()">
    <div class="py-10 flex flex-col divide-y divide-dashed">
        <template x-for="(item, index) in data">
            <div class="py-10 flex flex-col lg:flex-row gap-20 items-center">
                <a x-bind:href="item.link.url ?? item.link.uri">
                    <img x-bind:src="item.image.url" class="w-full max-w-64">
                </a>
                <div class="flex-1 w-full flex flex-col justify-center items-center gap-2">
                    <template x-for="(value, index) in item.schedule_table">
                        <div class="flex justify-between w-full text-lg">
                            <div class="flex-1">
                                <span class="font-bold" x-show="!value.schedule_tableoverride_date_label" x-text="value.schedule_tablelabel"></span>
                                <span class="font-bold" x-show="!value.schedule_tableoverride_date_label" x-text="value.schedule_tableweek.value"></span>

                                <span class="font-bold" x-show="value.schedule_tableoverride_date_label" x-text="value.schedule_tableoverride_date"></span>
                            </div>
                            <div class="flex-0 flex gap-2" x-show="!value.schedule_tableoverride_time">
                                <span class="font-bold" x-show="value.schedule_tabletime_from" x-data="{time_from: dateUtil.to12Hr(value.schedule_tabletime_from)}" x-text="time_from"></span>
                                <span x-show="value.schedule_tabletime_to">-</span>
                                <span class="font-bold" x-show="value.schedule_tabletime_to" x-data="{time_to: dateUtil.to12Hr(value.schedule_tabletime_to)}" x-text="time_to"></span>
                            </div>
                            <div class="flex-0 flex gap-2" x-show="value.schedule_tableoverride_time">
                                <span class="font-bold" x-show="value.schedule_tableoverride_time_label" x-text="value.schedule_tableoverride_time_label"></span>
                            </div>
                        </div>
                    </template>
                </div>

                <div class="flex-1">
                    <span x-html="item.content"></span>
                   id: {{ id }}
                    <div class="flex flex-col gap-2">
                        <a x-show="item.link.url ?? item.link.uri" :target="item.link1_targets.value" x-bind:href="item.link.url ?? item.link.uri" class="text-highlight font-bold no-underline flex items-center gap-2">
                            Read More
                            {{ svg src="/assets/svg/arrow-right" class="stroke-highlight" width="16" height="16" }}
                        </a>

                        <a x-show="item.link2.url ?? item.link2.uri" x-bind:href="item.link2.url ?? item.link2.uri" :target="item.link2_targets.value" class="text-highlight font-bold no-underline flex items-center gap-2">
                            <span x-text="item.link2_label" ></span>
                            {{ svg src="/assets/svg/arrow-right" class="stroke-highlight" width="16" height="16" }}
                        </a>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>

<script>
    document.addEventListener("alpine:init", async () => {
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString)
        const q = urlParams.get("q")

        Alpine.data("state", () => ({
            open: false,
            loading: true,
            data: [],
            search: {
                q: null,
                results: []
            },
            fuse: null,
            init() {
                this.search.q = q
                this.initData()
            },
            async initData() {
                const pageObj = {{ page | to_json | raw }}
                const trading_hours_comp = pageObj.bard_field.find(x => x.widget_name === "tables/trading_hours")
                const entries_field = trading_hours_comp?.entries_field.map(x => x.id)


                let url = "/trading_hours/list?"
                let searchParams = new URLSearchParams(url);

                url = trading_hours_comp.show_all_entries ? url : this.urlBuilder(url, entries_field)


                this.data= await window.fetchAPI(url)

                this.loading = false
            },
            urlBuilder(url, entries_field) {
                const searchParams = new URLSearchParams(url)


                if(entries_field) {
                    entries_field.forEach(id => searchParams.append('ids[]', id));
                }

                return decodeURIComponent(searchParams.toString())
            },
            isEmpty(value) {
                return value === null || value === undefined || value === ''
            }
        }));
   });
</script>