<script lang="ts">
    // let log_lvl: number = 0;

    // *** Import Svelte specific
    // import { goto } from '$app/navigation';

    // *** Import other supporting libraries
    // import { Spinner } from 'flowbite-svelte';
    import { BookOpenText, BookType } 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/stores/ae_stores';
    import {
        journals_loc,
        journals_sess,
        journals_slct
    } from '$lib/ae_journals/ae_journals_stores';

    // *** Setup Svelte properties
    interface Props {
        lq__journal_obj_li: any;
    }

    let { lq__journal_obj_li }: Props = $props();
</script>

<section class="journal_list flex flex-col gap-2 items-center justify-center w-full">
    {#if $lq__journal_obj_li && $lq__journal_obj_li.length}
        {#each $lq__journal_obj_li as journals_journal_obj, index}
            <div
                class="
            container journal journal_obj
            border rounded p-2 mb-2 space-y-2
            w-full max-w-(--breakpoint-md)
            flex flex-col items-center justify-center
            bg-{journals_journal_obj?.cfg_json.color_scheme}-100
            "
                class:hidden={(journals_journal_obj?.hide || !journals_journal_obj?.enable) &&
                    !$ae_loc.trusted_access}
                class:dim={journals_journal_obj.hide}
                class:bg-warning-100={!journals_journal_obj?.enable}
                class:text-warning-900={!journals_journal_obj?.enable}
            >
                <header
                    class="
                ae_header
                flex flex-row gap-2 items-center justify-between
                w-full
                text-neutral-800/60
                "
                >
                    <h3 class="journal__name h3">
                        <BookType class="m-1 inline-block" />
                        <span class="journal__name">{@html journals_journal_obj.name}</span>
                    </h3>

                    <!-- Show a label if the type code is set -->
                    {#if journals_journal_obj.type_code}
                        <span
                            class="
                        preset-tonal-warning
                        text-xs font-semibold
                        mr-2 px-2.5 py-0.5
                        rounded

                        "
                        >
                            <!-- <span class="ae_label">Type:</span> -->
                            <span class="ae_value">{journals_journal_obj.type_code}</span>
                        </span>
                    {/if}
                </header>

                <!-- {journals_journal_obj?.tmp_sort_3} -->

                {#if journals_journal_obj.description && $ae_loc.edit_mode}
                    <div
                        class="
                prose
                space-y-1
                journal__description
                p-2
                w-full max-w-(--breakpoint-sm) md:max-w-(--breakpoint-md)
                font-mono
                text-gray-900
                dark:bg-blue-900 dark:text-gray-100
                shadow-md rounded-lg
                text-sm font-normal text-wrap word-break

                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 journals_journal_obj.description_md_html}
                    </div>
                {/if}

                <div class="ae_options flex flex-row gap-2 items-center justify-center">
                    <a
                        href="/journals/{journals_journal_obj?.journal_id}"
                        class="btn btn-secondary btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 hover:underline transition"
                        title={`View: ${journals_journal_obj?.name}`}
                    >
                        <!-- <span class="fas fa-envelope-open m-1"></span> -->
                        <BookOpenText class="m-1" />
                        Open

                        {#if journals_journal_obj?.journal_entry_count}
                            <span class="ae_badge ae_info journal__journal_entry_count">
                                {@html journals_journal_obj?.journal_entry_count == 1
                                    ? `${journals_journal_obj?.journal_entry_count}&times; entry`
                                    : `${journals_journal_obj?.journal_entry_count}&times; entries`}
                            </span>
                        {/if}
                    </a>
                </div>

                <section
                    class="ae_section ae_footer ae_meta journal__meta mt-2 flex flex-col sm:flex-row gap-1 items-center justify-center text-sm text-gray-500"
                    class:hidden={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
                >
                    <div class="ae_group">
                        {#if !journals_journal_obj.updated_on}
                            <span class="journal__created_on">
                                <span class="ae_label">Created on:</span>
                                <span class="ae_value"
                                    >{ae_util.iso_datetime_formatter(
                                        journals_journal_obj.created_on,
                                        'datetime_12_long'
                                    )}</span
                                >
                            </span>
                        {:else}
                            <span class="journal__updated_on">
                                <span class="ae_label">Updated on:</span>
                                <span class="ae_value"
                                    >{ae_util.iso_datetime_formatter(
                                        journals_journal_obj.updated_on,
                                        'datetime_12_long'
                                    )}</span
                                >
                            </span>
                        {/if}
                    </div>
                </section>
            </div>
        {/each}
    {:else}
        No journals found at this time
    {/if}
</section>
<!-- {/if} -->
