<script lang="ts">
/** @type {import('./$types').LayoutProps} */
let log_lvl: number = 0;

let { data, children } = $props();

import { goto } from '$app/navigation';
import {
        ArrowDown01, ArrowDown10, ArrowDownUp,
        BetweenVerticalEnd, BetweenVerticalStart,
        BookHeart, BookImage, Bookmark, BookOpenText, BriefcaseBusiness,
        Check, Copy,
        Expand, Eye, EyeOff,
        Flag, FlagOff, FilePlus, Fingerprint,
        Globe,
        Library,
        MessageSquareWarning, Minus,
        Notebook,
        Pencil, Plus,
        RemoveFormatting,
        SquareLibrary,
        Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
        Tags, Target, ToggleLeft, ToggleRight, Trash2, TypeOutline,
        X
    } from '@lucide/svelte';

import { liveQuery } from "dexie";
import { Modal } from 'flowbite-svelte';

import { ae_util } from '$lib/ae_utils/ae_utils';
import { db_journals } from "$lib/ae_journals/db_journals";
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_prom, journals_trig } from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';


// interface Props {
//     data: any;
// }

// let { data }: Props = $props();

let tmp_journal_obj_changed: boolean = $state(false);
let tmp_journal_obj: key_val = $state({});


let ae_acct = data[$slct.account_id];
if (log_lvl) {
    console.log(`ae_acct = `, ae_acct);
}

$journals_sess.entry_li = [];
$journals_slct.journal_id = ae_acct.slct.journal_id;

let lq__journal_obj = $derived(liveQuery(async () => {
    if (log_lvl) {
        console.log(`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`);
    }
    let results = await db_journals.journal
        .get($journals_slct?.journal_id ?? ''); // null or undefined does not reset things like '' does

    $journals_slct.journal_obj = results;
    tmp_journal_obj = { ...results };
    if (log_lvl) {
        console.log(`lq__journal_obj: results = `, results);
    }

    return results;
}));

// $effect(() => {
//     if ($lq__journal_obj) {
//         tmp_journal_obj = { ...$lq__journal_obj };
//         console.log('tmp_journal_obj:', tmp_journal_obj);
//     }
// });

$effect(() => {
    if (tmp_journal_obj) {
        tmp_journal_obj_changed = JSON.stringify(tmp_journal_obj) != JSON.stringify($lq__journal_obj);
    }
});

async function handle_update_journal() {
    if (tmp_journal_obj.name && tmp_journal_obj.type_code) {
        try {
            let data_kv = {
                // account: $slct.account_id,
                name: tmp_journal_obj.name,
                description: tmp_journal_obj.description ?? '', // Ensure description is at least an empty string
                type_code: tmp_journal_obj.type_code,
                passcode: tmp_journal_obj.passcode,
                private_passcode: tmp_journal_obj.private_passcode,
                passcode_timeout: tmp_journal_obj.passcode_timeout,
                auth_key: tmp_journal_obj.auth_key, // The Journal Entry encryption password

                cfg_json: tmp_journal_obj.cfg_json

            };
            journals_func.update_ae_obj__journal({
                api_cfg: $ae_api,
                journal_id: $lq__journal_obj?.journal_id ?? '',
                data_kv: data_kv,
                log_lvl: log_lvl
            }).then((results) => {
                if (log_lvl) {
                    console.log('Journal updated:', results);
                }
                // $journals_slct.journal_id = results?.journal_id_random;
            }).catch((error) => {
                    console.error('Error updating journal:', error);
                    alert('Failed to update journal.');
            }).finally(() => {
                if ($journals_slct.journal_id) {
                    $journals_sess.show__modal_new__journal_obj = false;
                    // goto(`/journals/${$journals_slct.journal_id}`);
                }
            });
            // console.log('New journal updated:', result);
            // $journals_sess.show__modal_new__journal_obj = false;
            // goto(`/journals/${result.journal_id_random}`);
        } catch (error) {
            console.error('Error updating journal:', error);
            alert('Failed to update journal.');
        }
    } else {
        alert('Please provide both name and type for the journal.');
    }
}

</script>


<!-- Svelte layout for a Journal ID page and children -->
<section
    class="
        ae_journals__journal
        mx-auto
        flex flex-col grow gap-1
        items-center
        min-h-full
        max-h-max
        min-w-full
        max-w-max
        space-y-2
        "
    >


<div
    class="
        flex flex-row flex-wrap
        gap-1
        items-center justify-between
        border-gray-400
        border-b
        py-2
        w-full
        hover:bg-slate-100
        "
    >
    <a href="/journals"
        class="
            btn btn-sm
            variant-outline-tertiary
            hover:preset-filled-tertiary-500
            transition
            "
        title="View all journals for this account: {$ae_loc.account_name}"
        >
        <!-- <BookHeart /> -->
        <!-- <Library /> -->
        <SquareLibrary class="text-gray-500"/>
        <span class="hidden md:inline">
            All Journals
        </span>

    </a>

    {#if $journals_slct?.journal_entry_id}
    <a
        href="/journals/{$journals_slct?.journal_id}"
        class="
            btn btn-sm
            preset-tonal-tertiary border border-tertiary-500
            hover:preset-filled-tertiary-500
            transition
            "
        title="View all journal entries for this journal: {$lq__journal_obj?.name}"
        >
        <Notebook />
        <!-- <Bookmark /> -->
        <!-- <BookHeart class="m-1" /> -->
        <!-- <BookImage class="m-1" /> -->
        <!-- <BookOpenText class="m-1" /> -->
        <span class="hidden md:inline">Back:</span>
        <span class="font-bold">
            {$lq__journal_obj?.name || 'Journal'}
        </span>
    </a>
    {:else}
    <!-- Edit Journal button. Creates a modal to edit the journal. -->
    <!-- <button
        type="button"
        onclick={() => {
            tmp_journal_obj = {
                name: $lq__journal_obj?.name,
                description: $lq__journal_obj?.description,
                type_code: $lq__journal_obj?.type_code,
                passcode: $lq__journal_obj?.passcode,
                passcode_timeout: $lq__journal_obj?.passcode_timeout,
                auth_key: $lq__journal_obj?.auth_key,
                cfg_json: $lq__journal_obj?.cfg_json
            };
            $journals_sess.show__modal_edit__journal_obj = true;
        }}
        class:hidden={!$ae_loc.edit_mode}
        class="
            btn btn-sm
            variant-ghost-warning
            hover:variant-filled-warning
            transition
            "
        title="Edit Journal meta and configuration (name, type, passcode, categories, etc.: {$lq__journal_obj?.name})"
        >
        <Pencil />
        <span class="hidden md:inline">
            Edit Journal
        </span>
    </button> -->
    {/if}

    <!-- Add default journal entry -->
    <span class="flex flex-row flex-wrap items-center justify-center gap-1">
        <!-- <span class="text-sm text-gray-500 hidden md:inline">
            New entry:
        </span> -->
        <button
            type="button"
            onclick={() => {
                // $journals_sess.show__modal_new__journal_entry_obj = true;

                let data_kv = {
                    category_code: null,
                };
                if ($journals_loc.qry__category_code) {
                    data_kv.category_code = $journals_loc.qry__category_code;
                }
                if (log_lvl) {
                    console.log('Creating new journal entry with data_kv:', data_kv);
                }
                journals_func.create_ae_obj__journal_entry({
                    api_cfg: $ae_api,
                    journal_id: $lq__journal_obj?.journal_id,
                    data_kv: data_kv,
                    log_lvl: log_lvl
                }).then((results) => {
                    if (log_lvl) {
                        console.log('New journal entry created:', results);
                    }
                    $journals_slct.journal_entry_id = results?.journal_entry_id_random;
                    // $journals_loc.entry.edit = true;
                    $journals_loc.entry.edit_kv[$journals_slct.journal_entry_id] = 'current';
                    // alert(`Journal entry created successfully! ${$journals_slct.journal_entry_id}`);
                }).catch((error) => {
                    console.error('Error updating journal entry:', error);
                    alert('Failed to update journal entry.');
                }).finally(() => {
                    if ($journals_slct.journal_entry_id) {
                        goto(`/journals/${$lq__journal_obj?.journal_id}/entry/${$journals_slct.journal_entry_id}`);
                    } else {
                        alert('Failed to create new journal entry.');
                    }
                });
            }}
            class="
                btn btn-sm
                preset-tonal-secondary border border-secondary-500
                hover:preset-filled-secondary-500
                transition
                "
            title="Create a new journal entry for this journal: {$lq__journal_obj?.name}"
            >
            <FilePlus />
            <!-- <span class="fas fa-plus m-1"></span> -->
            <span class="hidden sm:inline">
                New Journal Entry
            </span>
        </button>

        <!-- Search input form -->
        <span class="flex flex-row items-center gap-2">
        <span class="text-sm text-gray-500 hidden lg:inline">
            Search:
        </span>
        <input
            disabled={false}
            type="text"
            placeholder="Search Journal Entries"
            bind:value={$journals_loc.qry__search_text}
            onkeyup={async (event) => {
                if (event.key === 'Enter') {
                    log_lvl = 1;
                    // $journals_loc.qry__search_text = event.target.value;
                    // $journals_trig.journal_entry_li = true;
                    // console.log('Search query:', $journals_loc.qry__search_text);

                    $journals_prom.load__journal_entry_obj_qry = await journals_func.qry__journal_entry({
                        api_cfg: $ae_api,
                        journal_id: $lq__journal_obj?.journal_id ?? '',
                        qry_str: $journals_loc.qry__search_text,

                        // qry_created_on: null,
                        // qry_alert: null,
                        // qry_priority: null,
                        // qry_type: and_type,

                        // enabled: $journals_loc.recovery_meetings.qry__enabled,
                        // hidden: $journals_loc.recovery_meetings.qry__hidden,
                        // order_by_li: $journals_loc.recovery_meetings.qry__order_by_li,
                        // limit: $journals_loc.recovery_meetings.qry__limit,
                        // try_cache: try_cache,
                        log_lvl: log_lvl,
                    });
                    if ($journals_prom.load__journal_entry_obj_qry.length) {
                        $journals_sess.entry_li = $journals_prom.load__journal_entry_obj_qry;

                        $journals_sess = {
                            ...$journals_sess }; // ensure session is updated

                        // $journals_trig.journal_entry_li = true; // trigger the entry list to refresh
                        // $journals_trig.journal_entry_li = $journals_prom.load__journal_entry_obj_qry;
                    } else {
                        console.log('Clear the search results: no entries found for that query.');
                        // $journals_sess.entry_li = [''];
                        $journals_sess.entry_li = null;
                        // $journals_trig.journal_entry_li = true;
                        // alert('No journal entries found for that search query.');
                        // $journals_sess = $journals_sess;
                    }
                }
            }}
            title="Search Journal Entries"
            class="input input-sm input-bordered w-44 text-sm md:w-52"
            class:bg-red-200={$journals_sess.entry_li == null}
            class:dark:bg-red-800={$journals_sess.entry_li == null}
            />
        <!-- Clear search text button -->
        <button
            disabled={true}
            class:hidden={!$journals_loc.qry__search_text}
            type="button"
            onclick={() => {
                // $journals_loc.qry__search_text = '';
                // $journals_trig.journal_entry_li = true;
                // console.log('Cleared search query:', $journals_loc.qry__search_text);
            }}
            class="btn btn-sm p-1.5 text-sm text-gray-500 preset-tonal-tertiary border border-tertiary-500 hover:preset-filled-tertiary-500 transition"
            title="Clear search text"
            >
            <!-- <X /> -->
            <RemoveFormatting strokeWidth="1" color="gray" size="1.25em" />
            <span class="hidden md:inline text-gray-500">
                Clear
            </span>
        </button>
        </span>


        <!-- Give list of categories to base the new entry on -->
        <span class="flex flex-row items-center gap-2">
            <span class="text-sm text-gray-500 hidden sm:inline">
                Category:
            </span>
            <select
                class="btn btn-secondary btn-sm
                preset-tonal-primary
                hover:preset-filled-primary-500
                transition
                text-xs
                "
                bind:value={$journals_loc.qry__category_code}
                onchange={(event) => {
                    // WARNING: This will cause pages to reset if the journal entry list is being filtered by category. This is a bug that should be fixed.
                    $journals_loc.qry__category_code = event.target.value;
                    $journals_loc.filter__category_code = event.target.value;
                    $journals_trig.journal_entry_li = true;
                    console.log('Selected category:', $journals_loc.qry__category_code);
                }}
                title="Select a category for the new journal entry"
                >
                <option value="">Select Category</option>
                {#each $lq__journal_obj?.cfg_json?.category_li as category}
                    <option value={category.code}>{category.name}</option>
                {/each}
            </select>
        </span>
    </span>

</div>



<!-- <div class="overflow-auto"> -->
{@render children()}
<!-- </div> -->


</section>




<!-- Modal for editing journal -->
{#if $journals_sess.show__modal_edit__journal_obj}
<Modal
    title="Edit Journal"
    bind:open={$journals_sess.show__modal_edit__journal_obj}
    autoclose={false}
    placement="top-center"
    size="xl"
    class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
    >
    <div class="modal">
        <div class="modal-box mx-2 mb-14 space-y-4">
            <!-- <h3 class="font-bold text-lg">Edit Journal</h3> -->
            <div class="space-y-2 py-2 mb-2">
                <label class="text-sm text-gray-500 hidden sm:inline">
                    Journal Name:
                <input type="text" placeholder="Journal Name" bind:value={tmp_journal_obj.name} class="input input-bordered w-full mb-2" />
                </label>

                <!-- Journal Description (Markdown) -->
                <label class="text-sm text-gray-500 hidden sm:inline">
                    Journal Description:
                <textarea
                    placeholder="Journal Description (Markdown format)"
                    bind:value={tmp_journal_obj.description}
                    class="input input-bordered w-full mb-2 h-32 resize-none"
                    title="Description of the journal (supports Markdown)"
                    ></textarea>
                </label>

                <div class="*:hover:inline">
                    <!-- input for passcode -->
                    <div class="*:hover:inline">
                        <label
                            class="text-sm text-gray-500">
                            Passcode:
                            <input type="text" placeholder="Passcode" bind:value={tmp_journal_obj.passcode} class="input input-bordered w-64 mb-2" />
                        </label>
                        <div class="text-xs text-gray-500 hidden md:inline">
                            <span class="text-red-500">*</span> This passcode is used to encrypt the Journal Entries.
                        </div>
                    </div>

                    <!-- input for private passcode -->
                    <div class="*:hover:inline">
                        <label
                            class="text-sm text-gray-500">
                            Private Passcode:
                            <input type="text" placeholder="Private Passcode" bind:value={tmp_journal_obj.private_passcode} class="input input-bordered w-64 mb-2" />
                        </label>
                        <div class="text-xs text-gray-500 hidden md:inline">
                            <span class="text-red-500">*</span> This passcode is combined with the regular passcode and used to encrypt the Journal Entries.
                        </div>
                    </div>

                    <!-- input for passcode timeout -->
                    <div class="*:hover:inline">
                        <label class="text-sm text-gray-500">
                            Passcode Timeout:
                        <input type="number" placeholder="Passcode Timeout" bind:value={tmp_journal_obj.passcode_timeout} class="input input-bordered w-32 mb-2" />
                        </label>
                    </div>
                </div>

                <!-- input for auth_key -->
                <label class="text-sm text-gray-500 sm:inline">
                    Auth Key:
                    <input type="text" placeholder="Auth Key" bind:value={tmp_journal_obj.auth_key} class="input input-bordered w-64 mb-2" />
                </label>

                <label class="text-sm text-gray-500">
                    Journal Type:
                <input type="text" placeholder="Journal Type" bind:value={tmp_journal_obj.type_code} class="input input-bordered w-48 mb-2" />
                </label>

                <!-- select option for journal type_code -->
                <div>
                    <span class="text-sm text-gray-500 sm:inline">
                        Journal Type:
                    </span>
                    <select
                        class="btn btn-sm
                        preset-tonal-surface border border-surface-500
                        hover:preset-filled-surface-500
                        transition
                        text-xs
                        "
                        bind:value={tmp_journal_obj.type_code}
                        onchange={(event) => {
                            // Update the cfg_json with the selected journal type. Example cate
                            tmp_journal_obj.type_code = event.target.value;
                            console.log('Selected journal type:', tmp_journal_obj.type_code);
                        }}
                        title="Select a journal type"
                        >
                        <option value="">Select Journal Type</option>
                        {#each $journals_loc.journal.type_code_li as journal_type}
                            <option value={journal_type.code}>{journal_type.name}</option>
                        {/each}
                    </select>
                </div>

                <div class="flex flex-row flex-wrap gap-1 items-start justify-start">
                    <!-- inputs for customizable journal category list -->
                    <!-- each category has a code and name; need to be able to add and remove categories -->
                    <div class="text-sm text-gray-500 hidden sm:inline">
                        Journal Categories:
                    </div>
                    <div class="flex flex-col gap-1 p-4">
                        {#each tmp_journal_obj?.cfg_json?.category_li as category, index}
                            <div class="flex flex-row items-center gap-1">
                                <input type="text" placeholder="Category Code" bind:value={tmp_journal_obj.cfg_json.category_li[index].code} class="input input-bordered w-48" />
                                <input type="text" placeholder="Category Name" bind:value={tmp_journal_obj.cfg_json.category_li[index].name} class="input input-bordered w-full" />
                                <button
                                    type="button"
                                    class="btn btn-sm preset-tonal-danger border border-danger-500 hover:preset-filled-danger-500 transition"
                                    onclick={() => {
                                        tmp_journal_obj.cfg_json.category_li.splice(index, 1);
                                        tmp_journal_obj.cfg_json.category_li = tmp_journal_obj.cfg_json.category_li;
                                    }}
                                    >
                                    <Minus />
                                    Remove
                                </button>
                            </div>
                        {/each}
                        <button
                            type="button"
                            onclick={() => {
                                tmp_journal_obj.cfg_json.category_li.push({ code: '', name: '' });
                                tmp_journal_obj.cfg_json.category_li = tmp_journal_obj.cfg_json.category_li;
                            }}
                            class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition max-w-48 p-1"
                            >
                            <Plus />
                            Add Category
                        </button>
                    </div>
                </div>

                <!-- Select max height options (Tailwind CSS) -->
                <div class="flex flex-row gap-1 items-center justify-start">
                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Journal Entry List Max Height:
                    </span>
                    <select
                        bind:value={tmp_journal_obj.cfg_json.entry_li_max_height}
                        onchange={(event) => {
                            tmp_journal_obj.cfg_json.entry_li_max_height = event.target.value;
                            console.log('Selected max height:', tmp_journal_obj.cfg_json.entry_li_max_height);
                        }}
                        class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
                        title="Select maximum height for journal entries in the list"
                        >
                        <option value="">Default (auto)</option>
                        <!-- <option value="none">None (no limit)</option> -->
                        <option value="max-h-8">Small (8)</option>
                        <option value="max-h-16">Medium (16)</option>
                        <option value="max-h-32">Large (32)</option>
                        <option value="max-h-96">Extra Large (96)</option>
                        <option value="max-h-full">Full (no limit)</option>

                    </select>
                </div>

                <!-- Select hover max height options (Tailwind CSS) -->
                <div class="flex flex-row gap-1 items-center justify-start">
                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Journal Entry List Hover Max Height:
                    </span>
                    <select
                        bind:value={tmp_journal_obj.cfg_json.entry_li_hover_max_height}
                        onchange={(event) => {
                            tmp_journal_obj.cfg_json.entry_li_hover_max_height = event.target.value;
                            console.log('Selected max height:', tmp_journal_obj.cfg_json.entry_li_hover_max_height);
                        }}
                        class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
                        title="Select maximum height for journal entries in the list"
                        >
                        <option value="">Default (auto)</option>
                        <!-- <option value="none">None (no limit)</option> -->
                        <option value="hover:max-h-8">Small (8)</option>
                        <option value="hover:max-h-16">Medium (16)</option>
                        <option value="hover:max-h-32">Large (32)</option>
                        <option value="hover:max-h-96">Extra Large (96)</option>
                        <option value="hover:max-h-full">Full (no limit)</option>

                    </select>
                </div>

                <!-- Select click max height options (Tailwind CSS) -->
                <div class="flex flex-row gap-1 items-center justify-start">
                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Journal Entry List Active (click/press) Max Height:
                    </span>
                    <select
                        bind:value={tmp_journal_obj.cfg_json.entry_li_click_max_height}
                        onchange={(event) => {
                            tmp_journal_obj.cfg_json.entry_li_click_max_height = event.target.value;
                            console.log('Selected max height:', tmp_journal_obj.cfg_json.entry_li_click_max_height);
                        }}
                        class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
                        title="Select maximum height for journal entries in the list"
                        >
                        <option value="">Default (auto)</option>
                        <!-- <option value="none">None (no limit)</option> -->
                        <option value="active:max-h-8">Small (8)</option>
                        <option value="active:max-h-16">Medium (16)</option>
                        <option value="active:max-h-32">Large (32)</option>
                        <option value="active:max-h-96">Extra Large (96)</option>
                        <option value="active:max-h-full">Full (no limit)</option>

                    </select>
                </div>

                <!-- Toggles for the hover or click to expand Entry content when in a list -->
                <div class="flex flex-row flex-wrap gap-1 items-center justify-start">

                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Journal Entry List Expand Contents:
                    </span>

                    <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
                    <button
                        type="button"
                        onclick={() => {
                            if (tmp_journal_obj.cfg_json.expand_li_content == 'hover') {
                                tmp_journal_obj.cfg_json.expand_li_content = 'click';
                            } else {
                                tmp_journal_obj.cfg_json.expand_li_content = 'hover';
                            }
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of Markdown copy button(s) on Journal Entry view page"
                        >
                        {#if tmp_journal_obj.cfg_json.expand_li_content == 'hover'}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />

                            <Target strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Hover
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <Expand strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Click
                            </span>
                        {/if}
                        <span class="hidden">
                            Expand Entry Content
                        </span>
                    </button>
                    </span>
                </div>

                <!-- Toggles for the of how to add new content to an existing Journal Entry. append, prepend, and defaults to append -->
                <div class="flex flex-row flex-wrap gap-1 items-center justify-start">

                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Journal Entry Add Content:
                    </span>

                    <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
                    <button
                        type="button"
                        onclick={() => {
                            if (tmp_journal_obj.cfg_json.entry_add_text == 'append') {
                                tmp_journal_obj.cfg_json.entry_add_text = 'prepend';
                            } else {
                                tmp_journal_obj.cfg_json.entry_add_text = 'append';
                            }
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of Markdown copy button(s) on Journal Entry view page"
                        >
                        {#if tmp_journal_obj.cfg_json.entry_add_text == 'append'}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />

                            <!-- <Plus strokeWidth="2.5" color="green" /> -->
                            <BetweenVerticalEnd strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Append
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <!-- <Minus strokeWidth="2.5" color="green" /> -->
                            <BetweenVerticalStart strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Prepend
                            </span>
                        {/if}
                        <span class="hidden">
                            Add Content to Journal Entry
                        </span>
                    </button>
                    </span>
                </div>

                <!-- Select color scheme for the journal entries -->
                <!-- Should select from the common Tailwind CSS options. Examples: slate, blue, gray, green, orange, red, yellow, etc. -->
                <!-- Saves to cfg_json.color_scheme -->
                <div class="flex flex-row gap-1 items-center justify-start">
                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Color Scheme:
                    </span>
                    <select
                        bind:value={tmp_journal_obj.cfg_json.color_scheme}
                        onchange={(event) => {
                            tmp_journal_obj.cfg_json.color_scheme = event.target.value;
                            console.log('Selected color scheme:', tmp_journal_obj.cfg_json.color_scheme);
                        }}
                        class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
                        title="Select color scheme for journal entries"
                        >
                        <option value="">Default (auto)</option>
                        <option value="slate">Slate</option>
                        <option value="gray">Gray</option>
                        <option value="blue">Blue</option>
                        <option value="green">Green</option>
                        <option value="orange">Orange</option>
                        <option value="red">Red</option>
                        <option value="yellow">Yellow</option>
                    </select>
                </div>

                <div class="flex flex-row gap-1 items-center justify-start">
                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Preferred Viewer:
                    </span>
                    <select
                        bind:value={tmp_journal_obj.cfg_json.pref_viewer}
                        onchange={(event) => {
                            tmp_journal_obj.cfg_json.pref_viewer = event.target.value;
                            console.log('Selected viewer:', tmp_journal_obj.cfg_json.pref_viewer);
                        }}
                        class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
                        title="Select preferred viewer for journal entries"
                        >
                        <option value="">Default (Rendered)</option>
                        <option value="plain">Plain Text</option>
                        <option value="rendered">Rendered (HTML)</option>
                        <!-- <option value="textarea">Text Area</option> -->
                        <option value="codemirror">CodeMirror (readonly)</option>
                    </select>
                </div>

                <div class="flex flex-row gap-1 items-center justify-start">
                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Preferred Editor:
                    </span>
                    <select
                        bind:value={tmp_journal_obj.cfg_json.pref_editor}
                        onchange={(event) => {
                            tmp_journal_obj.cfg_json.pref_editor = event.target.value;
                            console.log('Selected editor:', tmp_journal_obj.cfg_json.pref_editor);
                        }}
                        class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
                        title="Select preferred editor for journal entries"
                        >
                        <option value="">Default (Text Area)</option>
                        <option value="textarea">Text Area</option>
                        <option value="codemirror">CodeMirror</option>
                    </select>
                </div>

                <!-- Toggles for the copy content buttons: plain text (in Markdown), HTML marked up, rendered rich HTML, encrypted content, clone Entry -->
                <div class="flex flex-row flex-wrap gap-1 items-center justify-start">

                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Journal Entry Copy Options:
                    </span>

                    <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_copy_plain_md = !tmp_journal_obj.cfg_json.hide_copy_plain_md;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of Markdown copy button(s) on Journal Entry view page"
                        >
                        {#if tmp_journal_obj.cfg_json.hide_copy_plain_md}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <EyeOff strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <Eye strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Plaintext Markdown Copy Button
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_copy_html = !tmp_journal_obj.cfg_json.hide_copy_html;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of HTML copy button(s) on Journal Entry view page"
                        >
                        {#if tmp_journal_obj.cfg_json.hide_copy_html}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <EyeOff strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <Eye strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            HTML Copy Button
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_copy_rich = !tmp_journal_obj.cfg_json.hide_copy_rich;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of rendered copy button(s) on Journal Entry view page"
                        >
                        {#if tmp_journal_obj.cfg_json.hide_copy_rich}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <EyeOff strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <Eye strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Rendered Rich Copy Button
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_copy_encrypted = !tmp_journal_obj.cfg_json.hide_copy_encrypted;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of encrypted copy button(s) on Journal Entry view page"
                        >
                        {#if tmp_journal_obj.cfg_json.hide_copy_encrypted}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <EyeOff strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <Eye strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Encrypted Copy Button
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_clone = !tmp_journal_obj.cfg_json.hide_clone;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of clone button(s) on Journal Entry view page"
                        >
                        {#if tmp_journal_obj.cfg_json.hide_clone}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <Copy strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <Copy strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Clone Button
                        </span>
                    </button>

                    </span>

                </div>

                <!-- Toggles for automatically hiding Entries marked as either: private, personal, or professional  -->
                <div class="flex flex-row flex-wrap gap-1 items-center justify-start">

                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Journal Entry Visibility:
                    </span>

                    <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_private = !tmp_journal_obj.cfg_json.hide_private;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of private entries"
                        >
                        {#if tmp_journal_obj.cfg_json.hide_private}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <Fingerprint strokeWidth="1" color="gray" class="mx-1" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <Fingerprint strokeWidth="2.5" color="green" class="mx-1" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Private Entries
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_personal = !tmp_journal_obj.cfg_json.hide_personal;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of personal entries"
                        >
                        {#if tmp_journal_obj.cfg_json.hide_personal}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <BookHeart strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <BookHeart strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Personal Entries
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_professional = !tmp_journal_obj.cfg_json.hide_professional;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of professional entries"
                        >
                        {#if tmp_journal_obj.cfg_json.hide_professional}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <BriefcaseBusiness strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <BriefcaseBusiness strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Professional Entries
                        </span>
                    </button>
                    </span>
                </div>


                <!-- Toggle buttons for showing/hiding various Journal Entry page view buttons: alert, alert message, private, public, personal, professional, template -->
                <div class="flex flox-row flex-wrap gap-1 items-center justify-start">

                    <span class="text-sm text-gray-500 hidden sm:inline">
                        Journal Entry View Buttons:
                    </span>

                    <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_btn_alert = !tmp_journal_obj.cfg_json.hide_btn_alert;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of alert icon button(s) on Journal Entry view page"
                        >
                        {#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_alert}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <Siren strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <Siren strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Alert Button
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_btn_alert_msg = !tmp_journal_obj.cfg_json.hide_btn_alert_msg;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of alert message icon button(s) on Journal Entry view page"
                        >
                        {#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_alert_msg}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <MessageSquareWarning strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <MessageSquareWarning strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Alert Message Button
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_btn_private = !tmp_journal_obj.cfg_json.hide_btn_private;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of private icon button(s) on Journal Entry view page"
                        >
                        {#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_private}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <Fingerprint strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <Fingerprint strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Private Button
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_btn_public = !tmp_journal_obj.cfg_json.hide_btn_public;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of public icon button(s) on Journal Entry view page"
                        >
                        {#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_public}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <EyeOff strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <Eye strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Public Button
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_btn_personal = !tmp_journal_obj.cfg_json.hide_btn_personal;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of personal icon button(s) on Journal Entry view page"
                        >
                        {#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_personal}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <BookHeart strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <BookHeart strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Personal Button
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_btn_professional = !tmp_journal_obj.cfg_json.hide_btn_professional;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of professional icon button(s) on Journal Entry view page"
                        >
                        {#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_professional}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <BriefcaseBusiness strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <BriefcaseBusiness strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Professional Button
                        </span>
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            tmp_journal_obj.cfg_json.hide_btn_template = !tmp_journal_obj.cfg_json.hide_btn_template;
                        }}
                        class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
                        title="Toggle visibility of template icon button(s) on Journal Entry view page"
                        >
                        {#if $journals_slct?.tmp_journal_obj?.cfg_json.hide_btn_template}
                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
                            <FilePlus strokeWidth="1" color="gray" />
                            <span class="hidden">
                                Hiding
                            </span>
                        {:else}
                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
                            <FilePlus strokeWidth="2.5" color="green" />
                            <span class="hidden">
                                Showing
                            </span>
                        {/if}
                        <span class="hidden">
                            Template Button
                        </span>
                    </button>
                    </span>
                </div>

                <!-- JSON configuration editor for advanced users -->
                <!-- textarea for json_cfg editing -->
            </div>


            <div class="flex flex-row flex-wrap gap-1 items-center justify-between w-full">
                <!-- Priority Button -->
                <button
                    type="button"
                    onclick={() => {
                        if ($ae_loc.trusted_access) {
                            let data_kv = {
                                priority: $lq__journal_obj?.priority ? false : true,
                            };
                            journals_func.update_ae_obj__journal({
                                api_cfg: $ae_api,
                                journal_id: $lq__journal_obj?.journal_id,
                                data_kv: data_kv,
                                log_lvl: log_lvl
                            }).then(() => {
                                alert('Journal priority updated successfully!');
                            }).catch((error) => {
                                console.error('Error updating journal priority:', error);
                                alert('Failed to update journal priority.');
                            });
                        }
                    }}
                    class="btn-icon-sm preset-tonal-tertiary transition"
                    title="Toggle priority of this journal"
                >
                    {#if $lq__journal_obj?.priority}
                        <Flag strokeWidth="2.5" color="green" />
                    {:else}
                        <FlagOff strokeWidth="1" color="gray" />
                    {/if}
                    <span class="hidden lg:inline">Priority</span>
                </button>

                <!-- Sort Buttons -->
                <span class="flex flex-row flex-wrap items-center justify-center border border-gray-300 rounded-lg">
                    <button
                        type="button"
                        onclick={() => {
                            let data_kv = {
                                sort: $lq__journal_obj?.sort ? $lq__journal_obj?.sort + 1 : 1,
                            };
                            journals_func.update_ae_obj__journal({
                                api_cfg: $ae_api,
                                journal_id: $lq__journal_obj?.journal_id,
                                data_kv: data_kv,
                                log_lvl: log_lvl
                            }).then(() => {
                                // alert('Journal sort order incremented!');
                            }).catch((error) => {
                                console.error('Error updating journal sort order:', error);
                                alert('Failed to update journal sort order.');
                            });
                        }}
                        class="btn-icon-sm preset-tonal-tertiary transition"
                        title="Increment sort order of this journal"
                    >
                        <Plus strokeWidth="2.5" color="blue" />
                    </button>
                    <span class="mx-1">
                        {#if $lq__journal_obj?.sort}
                            {$lq__journal_obj.sort}
                        {:else}
                            <ArrowDown10 />
                        {/if}
                    </span>
                    <button
                        type="button"
                        onclick={() => {
                            let data_kv = {
                                sort: $lq__journal_obj?.sort ? $lq__journal_obj?.sort - 1 : 0,
                            };
                            journals_func.update_ae_obj__journal({
                                api_cfg: $ae_api,
                                journal_id: $lq__journal_obj?.journal_id,
                                data_kv: data_kv,
                                log_lvl: log_lvl
                            }).then(() => {
                                // alert('Journal sort order decremented!');
                            }).catch((error) => {
                                console.error('Error updating journal sort order:', error);
                                alert('Failed to update journal sort order.');
                            });
                        }}
                        class="btn-icon-sm preset-tonal-tertiary transition"
                        title="Decrement sort order of this journal"
                    >
                        <Minus strokeWidth="2.5" color="blue" />
                    </button>
                </span>

                <!-- Group Input -->
                <input
                    type="text"
                    bind:value={tmp_journal_obj.group}
                    placeholder="Group"
                    onchange={() => {
                        let data_kv = {
                            group: tmp_journal_obj.group,
                        };
                        journals_func.update_ae_obj__journal({
                            api_cfg: $ae_api,
                            journal_id: $lq__journal_obj?.journal_id,
                            data_kv: data_kv,
                            log_lvl: log_lvl
                        }).then(() => {
                            alert('Journal group updated successfully!');
                        }).catch((error) => {
                            console.error('Error updating journal group:', error);
                            alert('Failed to update journal group.');
                        });
                    }}
                    class="input input-sm input-bordered w-24"
                    title="Set group (for sorting) of this journal"
                />

                <!-- Hide Button -->
                <button
                    type="button"
                    onclick={() => {
                        let data_kv = {
                            hide: tmp_journal_obj.hide ? false : true,
                        };
                        journals_func.update_ae_obj__journal({
                            api_cfg: $ae_api,
                            journal_id: $lq__journal_obj?.journal_id,
                            data_kv: data_kv,
                            log_lvl: log_lvl
                        }).then(() => {
                            alert('Journal visibility updated successfully!');
                        }).catch((error) => {
                            console.error('Error updating journal visibility:', error);
                            alert('Failed to update journal visibility.');
                        });
                    }}
                    class="btn btn-sm md:btn-md preset-tonal-warning hover:preset-filled-warning-500 transition"
                    title="Toggle visibility of this journal"
                >
                    {#if $lq__journal_obj?.hide}
                        <EyeOff strokeWidth="1" color="red" class="inline-block" />
                        <span class="hidden md:inline">Hidden</span>
                    {:else}
                        <Eye strokeWidth="2.5" color="green" class="inline-block" />
                        <span class="hidden md:inline">Visible</span>
                    {/if}
                </button>

                <!-- Enable Button -->
                <button
                    type="button"
                    onclick={() => {
                        let data_kv = {
                            enable: $lq__journal_obj?.enable ? false : true,
                        };
                        journals_func.update_ae_obj__journal({
                            api_cfg: $ae_api,
                            journal_id: $lq__journal_obj?.journal_id,
                            data_kv: data_kv,
                            log_lvl: log_lvl
                        }).then(() => {
                            alert('Journal enable status updated successfully!');
                        }).catch((error) => {
                            console.error('Error updating journal enable status:', error);
                            alert('Failed to update journal enable status.');
                        });
                    }}
                    class="btn btn-sm md:btn-md preset-tonal-error hover:preset-filled-error-500 transition"
                    title="Toggle enable status of this journal"
                >
                    {#if $lq__journal_obj?.enable}
                        <ShieldCheck strokeWidth="2.5" color="green" class="inline-block" />
                        <span class="hidden md:inline">Enabled</span>
                    {:else}
                        <ShieldMinus strokeWidth="1" color="red" class="inline-block" />
                        <span class="hidden md:inline">Disabled</span>
                    {/if}
                </button>

                <!-- Delete Button -->
                <button
                    type="button"
                    onclick={() => {
                        if (confirm(`Are you sure you want to delete this journal?`)) {
                            journals_func.delete_ae_obj_id__journal({
                                api_cfg: $ae_api,
                                journal_id: $lq__journal_obj?.journal_id,
                                log_lvl: log_lvl
                            }).then(() => {
                                alert('Journal deleted successfully!');
                                goto('/journals');
                            }).catch((error) => {
                                console.error('Error deleting journal:', error);
                                alert('Failed to delete journal.');
                            });
                        }
                    }}
                    class="btn btn-sm md:btn-md preset-tonal-error hover:preset-filled-error-500 transition"
                    title="Delete this journal"
                >
                    <Trash2 strokeWidth="2.5" color="orange" class="inline-block" />
                    <span class="hidden md:inline">Delete</span>
                </button>
            </div>


            <div class="modal-action">
                <button
                    type="button"
                    onclick={handle_update_journal}
                    class="btn preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition"
                    >
                    <Check />
                    Update
                </button>
                <button
                    type="button"
                    onclick={$journals_sess.show__modal_edit__journal_obj ?? false}
                    class="btn preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition"
                    >
                    <X />
                    Cancel
                </button>


            </div>

            <button
                type="button"
                onclick={handle_update_journal}
                class="btn preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition absolute top-0 right-16 m-2"
                title="Save changes to this journal"
                >
                <Check />
                Update
            </button>
        </div>
    </div>
</Modal>
{/if}
