<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} -->
