<script lang="ts">
// *** Import Svelte specific

// *** Import other supporting libraries
import {
        BookPlus, BookOpenText
    } from '@lucide/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/ae_stores';
import { journals_loc, journals_sess, journals_slct, journals_trig, journals_prom } from '$lib/ae_journals/ae_journals_stores';
// import { journals_func } from '$lib/ae_journals/ae_journals_functions';

interface Props {
    log_lvl?: number;
    lq__journal_obj: any;
    lq__journal_entry_obj_li: any;
}

let { log_lvl = 0,
    lq__journal_obj,
    lq__journal_entry_obj_li
}: Props = $props();

// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_trigger: any = null;
// let ae_triggers: key_val = {};

// Reminder: Styling is being done with Tailwind CSS, not Bootstrap.
</script>


<section class="
    rounded-lg p-2 m-2 w-full
    flex flex-col flex-wrap items-center justify-center
    bg-{$lq__journal_obj?.cfg_json.color_scheme}-100
    text-gray-900 dark:text-gray-900
    "
    bind:clientHeight={$ae_loc.iframe_height_modal_body}>

<header class="ae_header journal__header">
    <h2 class="journal__name h3 text-center ">
        <BookOpenText class="inline-block" />
        {@html $lq__journal_obj?.name ?? 'Loading...'}
        {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
            ({$lq__journal_entry_obj_li?.length ?? '0'}&times;)
        {/if}
        {#await $journals_prom.load__journal_entry_obj_li}
            <span class="fas fa-spinner fa-spin"></span>
        {:then}
            <!-- done -->
        {/await}
    </h2>
</header>

<!-- Show Journal description -->
<!-- class:bg-green-100={$lq__journal_obj?.cfg_json.color_scheme ?? 'green'} -->
<!-- prose-h1:text-gray-100 dark:prose-h1:text-gray-900 -->
<!-- <div> -->
{#if $lq__journal_obj?.description}
    <div
        class="
            prose
            space-y-1
            m-4
            p-2
            w-full max-w-screen-md
            font-mono
            text-gray-900
            dark:bg-blue-900/40 dark:text-gray-100
            shadow-md rounded-lg
            text-sm font-normal text-wrap word-break

            prose-p:m-0 prose-p:p-0
            prose-h1:underline prose-h1:decoration-double
            prose-h2:underline
            prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
            prose-h1:m-0 prose-h2:m-0 prose-h3:m-0 prose-h4:m-0 prose-h5:m-0 prose-h6:m-0

            prose-li:m-0 prose-li:p-0 prose-li:line-height-none
            "
        >
        {@html $lq__journal_obj.description_md_html}
</div>
{/if}
<!-- </div> -->




</section>