<script lang="ts">
interface Props {
    /** @type {import('./$types').PageData} */
    log_lvl?: number;
    data?: any;
    container_class_li?: string | Array<string>;
    link_to_type: null | string;
    link_to_id: null | string;
    lq__event_obj_li: any;
}

let {
    log_lvl = $bindable(0),
    data,
    container_class_li = [],
    link_to_type = null,
    link_to_id = null,
    lq__event_obj_li
}: Props = $props();

// *** Import Svelte specific
import { onMount } from 'svelte';

// *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import {
    idaa_loc,
    idaa_sess,
    idaa_slct,
    idaa_trig
} from '$lib/stores/ae_idaa_stores';
import { api } from '$lib/ae_api/api';
import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';

// Favorites are stored in a dedicated data_store record (code: idaa_meetings_favorites,
// scoped to the IDAA account_id) so toggling never touches ae_event rows or their
// updated_on timestamps. Structure: { [novi_uuid]: [event_id, ...] }.
// One shared record per account — known race condition if two members toggle at
// the exact same moment (last write wins). Acceptable for ~1000 members.
let ds_fav_id = $state<string | null>(null);
let ds_fav_json = $state<Record<string, string[]>>({});

// Tracks event IDs currently being toggled to prevent double-clicks
let favorites_in_progress = $state<Set<string>>(new Set());

onMount(async () => {
    if (!$idaa_loc.novi_uuid || !$ae_api?.base_url) return;
    try {
        const result = await api.get_data_store({
            api_cfg: $ae_api,
            code: 'idaa_meetings_favorites'
        });
        const rec_id = result?.data_store_id || result?.id;
        if (rec_id) {
            ds_fav_id = rec_id;
            let raw = result.json ?? result.json_str ?? null;
            if (typeof raw === 'string') {
                try { raw = JSON.parse(raw); } catch { raw = {}; }
            }
            ds_fav_json = (raw as Record<string, string[]>) ?? {};
        }
    } catch (err) {
        console.warn('[favorites] Failed to load favorites data store:', err);
    }
});

function check_fav(event_obj: Record<string, unknown>): boolean {
    const my_uuid = $idaa_loc.novi_uuid;
    if (!my_uuid) return false;
    const my_favs = ds_fav_json[my_uuid];
    return Array.isArray(my_favs) && my_favs.includes(event_obj.event_id as string);
}

async function toggle_favorite(event_obj: Record<string, unknown>) {
    const my_uuid = $idaa_loc.novi_uuid;
    const event_id = event_obj.event_id as string;

    if (!my_uuid || !event_id || !ds_fav_id || favorites_in_progress.has(event_id)) return;

    favorites_in_progress.add(event_id);

    const current_user_list: string[] = Array.isArray(ds_fav_json[my_uuid])
        ? [...ds_fav_json[my_uuid]]
        : [];
    const already_fav = current_user_list.includes(event_id);
    const new_user_list = already_fav
        ? current_user_list.filter((id) => id !== event_id)
        : [...current_user_list, event_id];

    const prev_json = ds_fav_json;
    const new_full_json = { ...ds_fav_json, [my_uuid]: new_user_list };

    // Optimistic update — ds_fav_json is reactive $state, so check_fav() re-evaluates
    // instantly everywhere it's called (derived list sort + each block template).
    ds_fav_json = new_full_json;

    try {
        await api.update_ae_obj({
            api_cfg: $ae_api,
            obj_type: 'data_store',
            obj_id: ds_fav_id,
            fields: { json: JSON.stringify(new_full_json) }
        });
    } catch (err) {
        console.warn('[favorites] API persist failed, rolling back:', err);
        ds_fav_json = prev_json;
    } finally {
        favorites_in_progress.delete(event_id);
    }
}

// Derived list of visible items (Refactored 2026-02-05)
//
// WHY: The parent search logic fetches matching records into the local IndexedDB.
// This derived store performs the final client-side visibility layer to ensure
// that the results count matches exactly what is rendered to the user.
let visible_event_obj_li = $derived.by(() => {
    // Subscribe to the LiveQuery observable using $ prefix
    const list = $lq__event_obj_li;

    if (!list || !Array.isArray(list)) {
        if (log_lvl > 1)
            console.log('visible_event_obj_li: Waiting for data stream...');
        return [];
    }

    /**
     * DUAL-LAYER VISIBILITY LOGIC
     * 1. Public Logic: If an item is enabled and NOT hidden, everyone sees it.
     * 2. Trusted Logic: If an item is disabled OR hidden, ONLY trusted users see it.
     *
     * NOTE: We use loose equality (==) because the database often returns
     * numeric 1/0 or string '1'/'0' for these tinyint fields.
     */
    const filtered = list.filter((item: any) => {
        if (!item) return false;

        const is_hidden = item.hide == true;
        const is_disabled = item.enable == false;

        if (!is_hidden && !is_disabled) return true;

        return $ae_loc.trusted_access === true;
    });

    if (log_lvl)
        console.log(
            `visible_event_obj_li: Input=${list.length}, Output=${filtered.length} (trusted=${$ae_loc.trusted_access})`
        );

    // Favorites: pin starred meetings to the top of the list.
    // Runs before the limit slice so favorites are never cut off.
    const my_uuid = $idaa_loc.novi_uuid;
    if (my_uuid) {
        filtered.sort((a, b) => {
            const a_fav = check_fav(a);
            const b_fav = check_fav(b);
            if (a_fav && !b_fav) return -1;
            if (!a_fav && b_fav) return 1;
            return 0; // stable — preserves existing sort within each group
        });
    }

    // Favorites-only filter — applied after sort so starred items are already at top
    const starred_only = $idaa_loc.recovery_meetings.qry__favorites_only;
    const shown = starred_only && my_uuid
        ? filtered.filter((item) => check_fav(item))
        : filtered;

    // Final safety slice to respect the user's limit selection
    return shown.slice(0, $idaa_loc.recovery_meetings.qry__limit || 150);
});
$effect(() => {
    if (log_lvl) {
        console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
    }
});
</script>

<section
    class="
        svelte_component ae_section ae_list event_obj_li list__event_obj recovery_meeting_list
        flex w-full flex-col items-center justify-center gap-2
        {container_class_li}
        ">
    {#if visible_event_obj_li && visible_event_obj_li.length}
        <div class="space-y-2">
            <h2 class="h3">
                <span class="text-base text-gray-500"> Results: </span>

                <span
                    class="bg-success-100 border-success-200 rounded-lg border px-4 text-3xl font-bold"
                    title="Visible Count {visible_event_obj_li.length}">
                    <span class="fas fa-list-ol mx-4"></span>
                    {visible_event_obj_li.length}
                </span>
            </h2>

            {#each visible_event_obj_li as idaa_event_obj, index (idaa_event_obj?.event_id ?? index)}
                {#if idaa_event_obj}
                    <!-- NOTE: There is extra logic here to hide items that are hidden/disabled for public users, but still show them to trusted/admin users. This is because the LiveQuery returns all items matching the query, and we need to filter on the client side based on the user's access level. The `visible_event_obj_li` derived store handles this filtering logic, so we can safely render based on that list. -->
                    <div
                        class="recovery_meeting event_obj container mb-2 flex w-full max-w-(--breakpoint-lg) flex-col items-center justify-center space-y-2 rounded-lg border bg-white p-2"
                        class:hidden={(idaa_event_obj?.hide ||
                            !idaa_event_obj?.enable) &&
                            !($ae_loc.trusted_access && $ae_loc.edit_mode)}
                        class:dim={idaa_event_obj?.hide ||
                            !idaa_event_obj?.enable}
                        class:bg-warning-100={!idaa_event_obj?.enable}
                        class:text-warning-900={!idaa_event_obj?.enable}>
                        <header
                            class="ae_header flex w-full flex-row flex-wrap items-center justify-between gap-2">
                            <h3
                                class="
                    event__name
                    h3
                    flex w-full
                    flex-row items-center justify-between gap-2 text-2xl
                    font-bold
                ">
                                <span class="flex flex-row items-center gap-2">
                                    <span
                                        class="fas fa-calendar-day text-neutral-800/80"
                                    ></span>
                                    {idaa_event_obj?.name ?? 'Recovery Meeting'}
                                </span>

                                {#if $idaa_loc.novi_uuid}
                                    {@const fav = check_fav(idaa_event_obj)}
                                    {@const pending = favorites_in_progress.has(idaa_event_obj?.event_id)}
                                    <!-- Inline style resets Bootstrap v3 .btn defaults (the iframe
                                         injects idaa.css which applies its own button box model).
                                         No Skeleton preset classes here — they fight with Bootstrap. -->
                                    <button
                                        type="button"
                                        onclick={() => toggle_favorite(idaa_event_obj)}
                                        disabled={pending}
                                        aria-pressed={fav}
                                        style="background:none; border:none; box-shadow:none; padding:2px 6px; cursor:pointer; line-height:1; opacity:{fav ? '1' : '0.35'}; transition:opacity 0.15s, color 0.15s;"
                                        title={fav ? 'Remove from My Meetings' : 'Add to My Meetings'}>
                                        {#if pending}
                                            <span class="fas fa-spinner fa-spin" style="font-size:1.1rem;"></span>
                                        {:else}
                                            <span class="fas fa-star" style="font-size:1.1rem; color:{fav ? '#d97706' : 'currentColor'};"></span>
                                        {/if}
                                    </button>
                                {/if}
                            </h3>

                            <div
                                class="
                    flex w-full flex-row items-center justify-between
                    gap-2
                ">
                                {#if idaa_event_obj?.status == 'unknown'}
                                    <span
                                        class="badge badge-warning preset-tonal-error"
                                        title="This meeting has not been confirmed by IDAA Central Office. Please reach out to the chair for current meeting list info. Meeting attendees can reach out to info@idaa.org if they know this is information is accurate and this meeting is still taking place.">
                                        <span
                                            class="fas fa-exclamation-triangle m-1"
                                        ></span>
                                        Not Confirmed by IDAA
                                        <span
                                            class="fas fa-exclamation-triangle m-1"
                                        ></span>
                                    </span>
                                {/if}

                                <span
                                    class="float-right flex flex-row flex-wrap items-center justify-end gap-1">
                                    <span
                                        class="badge badge-info preset-tonal-tertiary">
                                        {#if idaa_event_obj?.physical && idaa_event_obj?.virtual}
                                            <span class="fas fa-home m-1"
                                            ></span>
                                            F2F and
                                            <span class="fas fa-laptop m-1"
                                            ></span> Virtual
                                        {:else if idaa_event_obj?.physical}
                                            <span class="fas fa-home m-1"
                                            ></span> F2F
                                        {:else if idaa_event_obj?.virtual}
                                            <span class="fas fa-laptop m-1"
                                            ></span> Virtual
                                        {/if}
                                    </span>
                                    {#if idaa_event_obj?.type}
                                        <span
                                            class="badge badge-info preset-tonal-secondary"
                                            ><span class="fas fa-user-md m-1"
                                            ></span>
                                            {idaa_event_obj?.type}</span>
                                    {/if}
                                    {#if $ae_loc.trusted_access && idaa_event_obj?.hide}
                                        <span class="badge badge-warning"
                                            ><span
                                                class="fas fa-exclamation-triangle m-1"
                                            ></span> Hidden</span>
                                    {/if}
                                    {#if $ae_loc.administrator_access && !idaa_event_obj?.enable}
                                        <span
                                            class="badge badge-warning preset-tonal-warning"
                                            ><span
                                                class="fas fa-exclamation-triangle m-1"
                                            ></span> Not enabled</span>
                                    {/if}
                                </span>
                            </div>
                        </header>

                        <div
                            class="ae_options flex flex-row flex-wrap items-center justify-center gap-2">
                            <a
                                href="/idaa/recovery_meetings/{idaa_event_obj?.event_id}"
                                class="
                    novi_btn btn-secondary
                    btn btn-lg
                    preset-tonal-primary
                    preset-outlined-primary-100-900 hover:preset-filled-primary-200-800
                    w-48 min-w-fit text-lg
                    transition-all
                    "
                                title={`View: ${idaa_event_obj?.name}`}>
                                <span
                                    class="fas fa-calendar-check m-1 text-neutral-800/80"
                                ></span>
                                Meeting Details
                            </a>
                        </div>

                        <section class="ae_section event__content w-full">
                            <div
                                class="event__type"
                                class:ae_d_none={!idaa_event_obj?.type}>
                                <span class="ae_label"
                                    >Type of Recovery Meeting:</span>
                                <span class="ae_value"
                                    >{idaa_event_obj?.type}</span>
                            </div>

                            <div
                                class="event__attend flex flex-row flex-wrap items-center justify-start gap-2"
                                class:ae_d_none={!idaa_event_obj?.attend_json
                                    ?.zoom?.full_url}>
                                <span class="ae_label">
                                    <span class="fas fa-video m-1"></span>
                                    Zoom Meeting:
                                </span>
                                <span class="ae_value">
                                    <a
                                        href={idaa_event_obj?.attend_json?.zoom
                                            ?.full_url}
                                        target="_blank"
                                        class="
                            novi_btn btn-default
                            btn btn-sm
                            preset-outlined-tertiary-800-200
                            preset-filled-tertiary-200-800
                            hover:preset-filled-tertiary-600-400
                            transition
                            ">
                                        <span class="fas fa-link m-1"></span>
                                        Join: Zoom ID {idaa_event_obj
                                            ?.attend_json?.zoom?.meeting_id}
                                        {#if idaa_event_obj?.attend_json?.zoom?.passcode}
                                            Passcode: {idaa_event_obj
                                                ?.attend_json?.zoom?.passcode}
                                        {/if}
                                    </a>
                                </span>

                                {#if $ae_loc.manager_access}
                                    <MyClipboard
                                        value={idaa_event_obj?.attend_json?.zoom
                                            ?.full_url}
                                        btn_text="Copy Zoom Link"
                                        btn_title="Copy Zoom link to clipboard"
                                        btn_class="
                        novi_btn
                        btn btn-sm
                        preset-outlined-tertiary-800-200
                        preset-filled-tertiary-200-800
                        hover:preset-filled-tertiary-600-400
                        transition
                        "></MyClipboard>
                                {/if}
                            </div>

                            <div
                                class="event__attend flex flex-row flex-wrap items-center justify-start gap-2"
                                class:ae_d_none={!idaa_event_obj?.attend_json
                                    ?.jitsi?.full_url}>
                                <span class="ae_label">
                                    <span class="fas fa-video m-1"></span>
                                    Jitsi Meeting:
                                </span>
                                <span class="ae_value">
                                    <a
                                        href={idaa_event_obj?.attend_json?.jitsi
                                            ?.full_url}
                                        target="_blank"
                                        class="
                            novi_btn btn-default
                            btn btn-sm
                            preset-outlined-tertiary-800-200
                            preset-filled-tertiary-200-800
                            hover:preset-filled-tertiary-600-400
                            transition
                            ">
                                        <span class="fas fa-link m-1"></span>
                                        Join: {idaa_event_obj?.attend_json
                                            ?.jitsi?.name ?? 'Jitsi Meeting'}
                                        {#if idaa_event_obj?.attend_json?.jitsi?.passcode}
                                            Passcode: {idaa_event_obj
                                                ?.attend_json?.jitsi?.passcode}
                                        {/if}
                                    </a>
                                </span>

                                {#if $ae_loc.manager_access}
                                    <MyClipboard
                                        value={idaa_event_obj?.attend_json
                                            ?.jitsi?.full_url}
                                        btn_text="Copy Jitsi Link"
                                        btn_title="Copy Jitsi link to clipboard"
                                        btn_class="
                        novi_btn
                        btn btn-sm
                        preset-outlined-tertiary-800-200
                        preset-filled-tertiary-200-800
                        hover:preset-filled-tertiary-600-400
                        transition
                        "></MyClipboard>
                                {/if}
                            </div>

                            <div
                                class="ae_group event__timezone event__recurring_start_time">
                                <span class="ae_label">
                                    <span class="fas fa-clock m-1"></span>
                                    When:
                                </span>
                                {#if idaa_event_obj?.weekday_sunday || idaa_event_obj?.weekday_monday || idaa_event_obj?.weekday_tuesday || idaa_event_obj?.weekday_wednesday || idaa_event_obj?.weekday_thursday || idaa_event_obj?.weekday_friday || idaa_event_obj?.weekday_saturday}
                                    <span
                                        class="event__weekdays event__recurring_days_of_week">
                                        {#if idaa_event_obj?.weekday_sunday}<span
                                                class="ae_value">Sunday</span
                                            >{/if}
                                        {#if idaa_event_obj?.weekday_monday}<span
                                                class="ae_value">Monday</span
                                            >{/if}
                                        {#if idaa_event_obj?.weekday_tuesday}<span
                                                class="ae_value">Tuesday</span
                                            >{/if}
                                        {#if idaa_event_obj?.weekday_wednesday}<span
                                                class="ae_value">Wednesday</span
                                            >{/if}
                                        {#if idaa_event_obj?.weekday_thursday}<span
                                                class="ae_value">Thursday</span
                                            >{/if}
                                        {#if idaa_event_obj?.weekday_friday}<span
                                                class="ae_value">Friday</span
                                            >{/if}
                                        {#if idaa_event_obj?.weekday_saturday}<span
                                                class="ae_value">Saturday</span
                                            >{/if}
                                    </span>
                                {/if}

                                {#if idaa_event_obj?.recurring_start_time}
                                    <span class="ae_value"
                                        >{ae_util.iso_datetime_formatter(
                                            `2023-01-01 ${idaa_event_obj?.recurring_start_time}`,
                                            'time_12_short'
                                        )}</span>
                                {/if}
                                {#if idaa_event_obj?.timezone}
                                    (<span class="ae_value"
                                        >{idaa_event_obj?.timezone}</span
                                    >)
                                {:else}
                                    <div
                                        class="event__tiemzone ae_warning bg-warning-100">
                                        Required: No timezone was given!
                                    </div>
                                {/if}
                            </div>

                            <div class="event__contacts">
                                {#if idaa_event_obj?.contact_li_json && idaa_event_obj?.contact_li_json.length && idaa_event_obj?.contact_li_json[0].full_name}
                                    <div
                                        class="event__contact"
                                        class:ae_d_none={!idaa_event_obj
                                            ?.contact_li_json[0].full_name}>
                                        <span class="ae_label">
                                            <span class="fas fa-user m-1"
                                            ></span> Contact:
                                        </span>
                                        {idaa_event_obj?.contact_li_json[0]
                                            .full_name}
                                        {#if idaa_event_obj?.contact_li_json[0].email}
                                            | <a
                                                href="mailto:{idaa_event_obj
                                                    ?.contact_li_json[0]
                                                    .email}?Subject=IDAA: {idaa_event_obj?.name}"
                                                class="text-blue-800 hover:underline"
                                                >{idaa_event_obj
                                                    ?.contact_li_json[0].email}
                                            </a>
                                        {/if}
                                        {#if idaa_event_obj?.contact_li_json[0].phone_mobile}
                                            <span class="ae_label"
                                                >| Mobile:</span>
                                            <a
                                                href="tel:{idaa_event_obj
                                                    ?.contact_li_json[0]
                                                    .phone_mobile}"
                                                class="text-blue-800 hover:underline"
                                                >{idaa_event_obj
                                                    ?.contact_li_json[0]
                                                    .phone_mobile}</a>
                                        {/if}
                                        {#if idaa_event_obj?.contact_li_json[0].phone_home}
                                            <span class="ae_label"
                                                >| Home:</span>
                                            <a
                                                href="tel:{idaa_event_obj
                                                    ?.contact_li_json[0]
                                                    .phone_home}"
                                                class="text-blue-800 hover:underline"
                                                >{idaa_event_obj
                                                    ?.contact_li_json[0]
                                                    .phone_home}</a>
                                        {/if}
                                        {#if idaa_event_obj?.contact_li_json[0].phone_office}
                                            <span class="ae_label"
                                                >| Office:</span>
                                            <a
                                                href="tel:{idaa_event_obj
                                                    ?.contact_li_json[0]
                                                    .phone_office}"
                                                class="text-blue-800 hover:underline"
                                                >{idaa_event_obj
                                                    ?.contact_li_json[0]
                                                    .phone_office}</a>
                                        {/if}
                                        {#if idaa_event_obj?.contact_li_json[0].other_text}|
                                            {idaa_event_obj?.contact_li_json[0]
                                                .other_text}{/if}
                                    </div>
                                {:else if $ae_loc.trusted_access}
                                    <div
                                        class="event__contact ae_warning bg-warning-100">
                                        ALERT: The primary contact information
                                        may be missing?
                                    </div>
                                {/if}

                                {#if idaa_event_obj?.contact_li_json && idaa_event_obj?.contact_li_json.length && idaa_event_obj?.contact_li_json[1].full_name}
                                    <div
                                        class="event__contact"
                                        class:ae_d_none={!idaa_event_obj
                                            ?.contact_li_json[1].full_name}>
                                        <span class="ae_label">
                                            <span class="fas fa-user m-1"
                                            ></span> Contact:
                                        </span>
                                        {idaa_event_obj?.contact_li_json[1]
                                            .full_name}
                                        {#if idaa_event_obj?.contact_li_json[1].email}
                                            | <a
                                                href="mailto:{idaa_event_obj
                                                    ?.contact_li_json[1]
                                                    .email}?Subject=IDAA: {idaa_event_obj?.name}"
                                                class="text-blue-800 hover:underline"
                                                >{idaa_event_obj
                                                    ?.contact_li_json[1].email}
                                            </a>
                                        {/if}
                                        {#if idaa_event_obj?.contact_li_json[1].phone_mobile}
                                            <span class="ae_label"
                                                >| Mobile:</span>
                                            <a
                                                href="tel:{idaa_event_obj
                                                    ?.contact_li_json[1]
                                                    .phone_mobile}"
                                                class="text-blue-800 hover:underline"
                                                >{idaa_event_obj
                                                    ?.contact_li_json[1]
                                                    .phone_mobile}</a>
                                        {/if}
                                        {#if idaa_event_obj?.contact_li_json[1].phone_home}
                                            <span class="ae_label"
                                                >| Home:</span>
                                            <a
                                                href="tel:{idaa_event_obj
                                                    ?.contact_li_json[1]
                                                    .phone_home}"
                                                class="text-blue-800 hover:underline"
                                                >{idaa_event_obj
                                                    ?.contact_li_json[1]
                                                    .phone_home}</a>
                                        {/if}
                                        {#if idaa_event_obj?.contact_li_json[1].phone_office}
                                            <span class="ae_label"
                                                >| Office:</span>
                                            <a
                                                href="tel:{idaa_event_obj
                                                    ?.contact_li_json[1]
                                                    .phone_office}"
                                                class="text-blue-800 hover:underline"
                                                >{idaa_event_obj
                                                    ?.contact_li_json[1]
                                                    .phone_office}</a>
                                        {/if}
                                        {#if idaa_event_obj?.contact_li_json[1].other_text}|
                                            {idaa_event_obj?.contact_li_json[1]
                                                .other_text}{/if}
                                    </div>
                                {/if}
                                {#if $ae_loc.trusted_access}
                                    {#if idaa_event_obj?.contact_li_json && idaa_event_obj?.contact_li_json.length && !idaa_event_obj?.contact_li_json[0].full_name}
                                        <div class="event__contact ae_warning">
                                            Required: No primary contact
                                            information was found!
                                        </div>
                                    {/if}
                                    {#if !idaa_event_obj?.external_person_id}
                                        <div
                                            class="event__contact ae_warning bg-warning-100">
                                            Warning: Not linked to a Novi
                                            record!
                                        </div>
                                    {/if}
                                {/if}
                            </div>
                        </section>

                        {#if $ae_loc.administrator_access}
                            <section
                                class="ae_section ae_footer ae_meta event__meta text-sm text-neutral-500">
                                <div class="ae_group">
                                    <span class="event__created_on">
                                        Created on: {ae_util.iso_datetime_formatter(
                                            idaa_event_obj?.created_on,
                                            'datetime_12_short'
                                        )}
                                    </span>
                                    <span
                                        class="event__updated_on"
                                        class:ae_d_none={!idaa_event_obj?.updated_on}>
                                        Updated on: {ae_util.iso_datetime_formatter(
                                            idaa_event_obj?.updated_on,
                                            'datetime_12_short'
                                        )}
                                    </span>
                                </div>
                            </section>
                        {/if}
                    </div>
                {/if}
            {/each}
        </div>
    {:else}
        <div class="space-y-2">
            {#if $idaa_sess.recovery_meetings.qry__status === 'loading'}
                <div
                    class="ae_highlight ae_padding_md ae_row ae_flex_justify_center">
                    <span class="fas fa-spinner fa-spin m-1"></span>
                    Loading...
                </div>
            {:else if $idaa_loc.recovery_meetings.qry__favorites_only}
                <div
                    class="ae_highlight ae_padding_md ae_row ae_flex_justify_center flex-col gap-2 text-center">
                    <span class="fas fa-star text-2xl text-yellow-400"></span>
                    <p>No starred meetings yet.</p>
                    <p class="text-sm opacity-75">Tap the ★ on any meeting card to add it to My Meetings.</p>
                </div>
            {:else}
                <div
                    class="ae_highlight ae_padding_md ae_row ae_flex_justify_center">
                    No recovery meetings available to show. The search may need
                    to be changed.
                </div>
            {/if}
        </div>
    {/if}
</section>

<style>
.ae_label {
    font-size: smaller;
}
.ae_value {
    font-weight: bold;
}

.event_obj .ae_meta {
    flex-direction: column;
}

.event_obj .ae_meta .ae_group {
    flex-direction: row;
}
</style>
