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

// *** Import Svelte specific
import { goto, invalidate, pushState, replaceState } from '$app/navigation';

import { NotebookText, Shapes } from '@lucide/svelte';


// *** Import Aether specific variables and functions
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { api } from '$lib/api';
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 } from '$lib/ae_journals/ae_journals_stores';

interface Props {
    lq__journal_entry_obj_li: any;
}

let { lq__journal_entry_obj_li }: Props = $props();

let ae_promises: key_val = $state({});
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};

</script>


<section class="journal_list flex flex-col gap-2 items-center justify-center w-full">
{#if $lq__journal_entry_obj_li && $lq__journal_entry_obj_li.length}

<!-- <div class="ae_group">
    <span class="ae_label">Group:</span>
    <span class="ae_value">{current_group}</span> -->

{#each $lq__journal_entry_obj_li as journals_journal_entry_obj, index}




    <div
        class="container journal journal_entry_obj border border-1 p-2 mb-2 space-y-2 w-full max-w-screen-lg flex flex-col items-center justify-center bg-white rounded-lg"
        class:dim={journals_journal_entry_obj.hide}
        class:bg-warning-100={!journals_journal_entry_obj?.enable}
        >

        <header class="ae_header flex flex-row gap-2 items-center justify-between w-full">
            <a
                href="/journals/{journals_journal_entry_obj?.journal_id}/entry/{journals_journal_entry_obj?.journal_entry_id}"
                class="btn btn-secondary variant-ghost-primary hover:variant-filled-primary transition"
                title={`View: ${journals_journal_entry_obj?.name}`}
                >
                <NotebookText class="m-1"/>
                <span class="hidden md:inline">
                View
                </span>
            </a>

            {#if journals_journal_entry_obj.category_code}
                <!-- When clicked, this will filter by the category code. -->
                <button
                    type="button"
                    onclick={() => {
                        if (log_lvl) {
                            console.log('$journals_loc.filter__category_code', $journals_loc.filter__category_code);
                        }
                        if ($journals_loc.filter__category_code == journals_journal_entry_obj.category_code) {
                            $journals_loc.filter__category_code = null;
                        } else {
                            $journals_loc.filter__category_code = journals_journal_entry_obj.category_code;
                        }
                        // $journals_loc = {
                        //     ...$journals_loc,
                        // };
                        $journals_trig.journal_entry_li = true;
                        if (log_lvl) {
                            console.log('$journals_loc.filter__category_code', $journals_loc.filter__category_code);
                        }
                    }}
                    class="btn variant-ghost-secondary hover:variant-filled-secondary transition"
                    title={`Filter by category: ${journals_journal_entry_obj.category_code}`}
                    >
                    <Shapes class="m-1 inline-block"/>
                    {journals_journal_entry_obj.category_code ?? '-- no category --'}
                </button>
            {/if}

            <h3 class="journal__name h4">
                <span class="journal__name">{@html journals_journal_entry_obj.name ?? ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}</span>
            </h3>
        </header>




        {#if journals_journal_entry_obj.content}<pre class="journal__content p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-normal whitespace-pre-wrap">{@html journals_journal_entry_obj.content}</pre>{/if}

        <!-- <div class="ae_options flex flex-row flex-wrap gap-2 items-center justify-center"> -->

            <!-- <a
                href="/journals/{journals_journal_entry_obj?.journal_id}/entry/{journals_journal_entry_obj?.journal_entry_id}"
                class="btn btn-secondary btn-md variant-ghost-primary hover:variant-filled-primary transition"
                title={`View: ${journals_journal_entry_obj?.name}`}
                >
                <NotebookText class="m-1"/> View
            </a> -->

            <!-- {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
                <button
                    type="button"
                    disabled={!$ae_loc.trusted_access}
                    onclick={() => {
                        $journals_slct.journal_entry_id = journals_journal_entry_obj.journal_entry_id;
                        $journals_slct.journal_entry_obj = journals_journal_entry_obj;

                        $journals_sess.show__modal_view__journal_entry_id = false;
                        $journals_sess.show__modal_edit__journal_entry_id = $journals_slct.journal_entry_id;
                    }}
                    class="novi_btn btn btn-sm variant-glass-warning hover:variant-filled-warning transition"
                    title={`Edit journal entry: ${journals_journal_entry_obj?.name}`}
                    >
                    <span class="fas fa-edit m-1"></span> Edit
                </button>
            {/if} -->
        <!-- </div> -->

        <section class="ae_section journal_entry__entry">
            <!-- {#if journals_journal_entry_obj?.description}
            <div
                class="journal_entry__description ae_description"
                >
                <div class="ae_label journal_entry__description text-sm">Description:</div>
                <div class="ae_value journal_entry__description">
                    {@html journals_journal_entry_obj?.description}
                </div>
            </div>
            {/if} -->

            <!-- {#if journals_journal_entry_obj?.entry_html}
            <div
                class="journal_entry__entry_html ae_entry_html"
                >
                <div class="ae_label journal_entry__entry_html text-sm">Content:</div>
                <div class="ae_value journal_entry__entry_html">
                    {@html journals_journal_entry_obj?.entry_html}
                </div>
            </div>
            {/if} -->

            <div
                class="ae_group"
                class:hidden={!journals_journal_entry_obj?.original_datetime && !journals_journal_entry_obj?.original_timezone}
                >
                <span class="ae_label text-sm">Original date/time:</span>
                {#if journals_journal_entry_obj.original_datetime}
                    <span class="ae_value ae_prop prop_original_datetime font-semibold">{ae_util.iso_datetime_formatter(journals_journal_entry_obj.original_datetime, 'datetime_12_long')}</span>
                {/if}
                {#if journals_journal_entry_obj.original_timezone}
                    <span class="ae_label text-sm">Timezone:</span>
                    <span class="ae_value font-semibold">{journals_journal_entry_obj.original_timezone}</span>
                {/if}
            </div>

        </section>


        <section
            class="ae_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}
            >
            <span
                class="journal_entry__journal_entry_type"
                class:hidden={!journals_journal_entry_obj.journal_entry_type}
                >
                Type: {journals_journal_entry_obj.journal_entry_type}
            </span>
            <span class="ae_group">
                <span
                    class="journal_entry__created_on"
                    >
                    Created on: {ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_12_long')}
                </span>
                <span
                    class="journal_entry__updated_on"
                    class:hidden={!journals_journal_entry_obj.updated_on}
                    >
                    Updated on: {ae_util.iso_datetime_formatter(journals_journal_entry_obj.updated_on, 'datetime_12_long')}
                </span>
            </span>
        </section>

    </div>



{/each}

<!-- </div> -->

{:else}
    <p>No journal entry available to show.</p>
{/if}
</section>
<!-- {/if} -->
