<script lang="ts">
import { onMount } from 'svelte';
// import { liveQuery } from "dexie";
import { Clipboard } from "flowbite-svelte";

import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { api } from '$lib/api';
// import Element_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte';

// import { core_func } from '$lib/ae_core_functions';
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { db_events } from "$lib/ae_events/db_events";
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';

interface Props {
    log_lvl?: number;
    container_class_li?: string|Array<string>;
    lq__event_file_obj_li: any;
    link_to_type: string;
    link_to_id: string;
    allow_basic?: boolean;
    allow_moderator?: boolean;
    display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
}

let {
    log_lvl = 0,
    container_class_li = [],
    lq__event_file_obj_li,
    link_to_type,
    link_to_id,
    allow_basic = false,
    allow_moderator = false,
    display_mode = 'default'
}: Props = $props();

// export let show_convert_btn: null|boolean = null;

// let ae_placeholder_li: key_val = {};
let ae_promises: key_val = $state({});
let ae_tmp: key_val = $state({});
ae_tmp.show__file_li = true;
ae_tmp.show__direct_download = $events_loc.pres_mgmt.show__direct_download;
// let ae_triggers: key_val = {};

onMount(() => {
    if (log_lvl) {
        console.log(`Element - Manage Event File List: link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
        console.log(`allow_basic: ${allow_basic}; allow_moderator: ${allow_moderator}`);
    }
});

let clipboard_success = $state(false);
</script>


<div
    class="float-right flex flex-row items-center"
    >
    <button
        type="button"
        onclick={() => {
            console.log('*** Refresh button clicked ***');

            db_events.files.clear();

            let params = {
                qry__enabled: 'all',
                qry__hidden: 'all',
            }

            events_func.load_ae_obj_li__event_file({
                api_cfg: $ae_api,
                for_obj_type: link_to_type,
                for_obj_id: link_to_id,
                params: params,
                try_cache: true
            });

            // ae_tmp.show__file_li = false;
            // console.log(`$lq__event_file_obj_li:`, $lq__event_file_obj_li);
            // $slct_trigger = 'load__event_file_obj_li';
            // ae_tmp.show__file_li = true;
        }}
        class="btn btn-sm p-1 m-1 preset-tonal-tertiary hover:preset-tonal-warning border border-warning-500 transition hover:transition-all *:hover:inline"
        class:hidden={!$ae_loc.edit_mode || !$ae_loc.authenticated_access}
        title="Refresh the list of files"
        >
        <span class="fas fa-sync-alt m-1"></span>
        <div class="hidden">
        Files
        </div>
    </button>

    <button
        type="button"
        onclick={() => {
            console.log('*** Show Alt Download button clicked ***');
            ae_tmp.show__direct_download = !ae_tmp.show__direct_download;
        }}
        class="btn btn-sm p-1 m-1 preset-tonal-tertiary hover:preset-tonal-warning border border-warning-500 transition hover:transition-all *:hover:inline"
        class:hidden={!$ae_loc.edit_mode || !$ae_loc.trusted_access}
        title="Toggle direct download link and copy link button"
        >
        <span class="fas fa-download m-1"></span>
        <div class="hidden">
        {ae_tmp.show__direct_download ? 'Alt On' : 'Alt Download Off'}
        </div>
    </button>
</div>


<section class="svelte_component event_file_uploaded_manage {container_class_li}"
    class:text-sm={display_mode != 'default'}
    >


<h3
    class="h6"
    class:hidden={!$lq__event_file_obj_li?.length || display_mode != 'default'}
    >
    Manage Files:
    <span class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
        title="Files for {link_to_type ?? '-- not set --'}: {link_to_id ?? '-- not set --'} (files: {$lq__event_file_obj_li?.length ?? 'None'})"
        >
        <span class="fas fa-folder-open mx-1"></span>
        {@html $lq__event_file_obj_li ? `${$lq__event_file_obj_li.length}&times;` : '-- none --'}
    </span>
</h3>

{#if $lq__event_file_obj_li && $lq__event_file_obj_li.length}
<div class="overflow-auto w-full">
<table class="table-auto w-full">

    {#if display_mode === 'default'}
    <thead>
        <tr>
            <th class="text-center">Download File</th>
            {#if display_mode === 'default'}
            <th
                class="text-center"
                class:hidden={!allow_basic && !$ae_loc.trusted_access}
                >Options</th>
            {/if}
            {#if display_mode === 'default'}
            <th
                class="text-center"
                class:hidden={!allow_basic && !$ae_loc.trusted_access}
                >Status</th>
            {/if}
            <th class="text-center">Meta</th>
        </tr>
    </thead>
    {/if}

    <tbody>

{#each $lq__event_file_obj_li as event_file_obj}
<tr
    class="ae_obj obj_event_file border-t border-b border-gray-200 hover:bg-gray-50 hover:border-gray-300"
    class:dim={event_file_obj?.hide}
    >
    <td class="event_file__file align-middle">
        {#if $events_sess.pres_mgmt?.show_field_edit__filename != event_file_obj.event_file_id_random}
        <button
            type="button"
            disabled={!allow_basic && !allow_moderator && !$ae_loc.trusted_access}
            onclick={() => {
                // ae_promises[event_file_obj.event_file_id_random]
                ae_promises[event_file_obj.event_file_id_random] = api.download_hosted_file({
                    api_cfg: $ae_api,
                    hosted_file_id: event_file_obj.hosted_file_id_random,
                    return_file: true,
                    filename: event_file_obj.filename,
                    auto_download: true,
                    log_lvl: 0
                });

                // window.postMessage({ type: 'download_event_file', event_file_id: event_file_obj.event_file_id_random, filename: event_file_obj.filename, auto_download: true }, '*');
            }}
            class="btn btn-sm lg:btn-md preset-tonal-primary hover:preset-filled-primary-500 min-w-72 lg:min-w-96"
            title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
            >
            {#await ae_promises[event_file_obj.event_file_id_random]}
                <span class="fas fa-spinner fa-spin mx-1"></span>
                <span class="">
                    Downloading
                    {#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
                        {$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
                    {/if}
                    :
                </span>
            {:then}
                <!-- <span class="fas fa-download mx-1"></span> -->
                <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
                <!-- <span class="text-sm">
                Download:
                </span> -->
            {/await}

            <span class="grow">
            {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 30})}
            </span>

            <span
                class="badge preset-tonal-success hover:preset-filled-success-500 text-sm"
                class:hidden={!event_file_obj.file_purpose}
                >
                {event_file_obj.file_purpose}
            </span>
        </button>

        <span
            class="px-4 py-2 flex flex-col gap-0.5"
            class:hidden={!ae_tmp.show__direct_download}
            >
            <div class="flex flex-row gap-0.5">
                <span class="text-xs text-gray-500 w-32">
                    Original:
                </span>
                <a
                    href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download"
                    class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs underline"
                    title={`Download this file:\n${ae_util.clean_filename(event_file_obj?.filename)}\n[API] SHA256: ${event_file_obj?.hash_sha256.slice(0, 10)}...\nHosted ID: ${event_file_obj?.hosted_file_id_random} Event File ID: ${event_file_obj?.event_file_id_random}`}
                    >
                    <span class="fas fa-download mx-1"></span>
                    <span class="hidden">
                    Download
                    </span>
                </a>
                <!-- <button
                    type="button"
                    use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
                    class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
                    title="Copy the direct download file link: {ae_util.clean_filename(event_file_obj?.filename ?? 'unknown')}"
                    >
                    <span class="fas fa-copy mx-1"></span>
                    <span class="hidden">
                    Copy Link
                    </span>
                </button> -->

                <Clipboard
                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
                    bind:success={clipboard_success}
                    class="w-24"
                    >
                    {#if clipboard_success}Copied!{:else}Copy Link{/if}
                </Clipboard>
            </div>

            <div class="flex flex-row gap-0.5">
                <span class="text-xs text-gray-500 w-32">
                Session Name:
                </span>
                <a
                    href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={event_file_obj?.event_session_code}-{ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-{ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.{event_file_obj?.extension}&x_no_account_id_token=direct-download"
                    class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs underline"
                    title={`Download renamed with session name to: ${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}`}
                    >
                    <span class="fas fa-download mx-1"></span>
                    <span class="hidden">
                    Renamed
                    </span>
                </a>
                <!-- <button
                    type="button"
                    use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
                    class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
                    title="Copy the renamed file link"
                    >
                    <span class="fas fa-copy mx-1"></span>
                    <span class="hidden">
                    Copy Renamed
                    </span>
                </button> -->
                <Clipboard
                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
                    bind:success={clipboard_success}
                    class="w-24"
                    >
                    {#if clipboard_success}Copied!{:else}Copy Renamed{/if}
                </Clipboard>
            </div>

            <div class="flex flex-row gap-0.5">
                <span class="text-xs text-gray-500 w-32">
                Presentation Name:
                </span>
                <a
                    href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={event_file_obj?.event_session_code}-{ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-{ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.{event_file_obj?.extension}&x_no_account_id_token=direct-download"
                    class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs underline"
                    title={`Download renamed with presentation name to: ${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}`}
                    >
                    <span class="fas fa-download mx-1"></span>
                    <span class="hidden">
                    Renamed
                    </span>
                </a>
                <!-- <button
                    type="button"
                    use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
                    class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
                    title="Copy the renamed file link"
                    >
                    <span class="fas fa-copy mx-1"></span>
                    <span class="hidden">
                    Copy Renamed
                    </span>
                </button> -->
                <Clipboard
                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
                    bind:success={clipboard_success}
                    class="w-24"
                    >
                    {#if clipboard_success}Copied!{:else}Copy Renamed{/if}
                </Clipboard>
            </div>
        </span>

        {:else}

        <!-- Show change filename input field here -->
         <span
            class="flex flex-col gap-1 text-sm"
            >
            <input
                type="text"
                size="12"
                placeholder="Filename"
                bind:value="{$events_sess.pres_mgmt.tmp_val__filename_no_ext}"
                data-original_value="{event_file_obj.filename}"
                class="input min-w-72 lg:min-w-96 text-sm bg-warning-100"
                title="Rename this file. No extension."
                >
            {#if $events_sess.pres_mgmt.tmp_val__filename_no_ext.trim() != event_file_obj.filename_no_ext}
            <button
                type="button"
                onclick={async () => {
                    let new_filename = $events_sess.pres_mgmt.tmp_val__filename_no_ext.trim()
                    // Remove possible double extension
                    new_filename = new_filename.replace('.'+event_file_obj.extension, '');

                    // Add the extension back
                    new_filename = new_filename + '.' + event_file_obj.extension;

                    // Remove any double dots
                    new_filename = new_filename.replace(/\.\./g, '.');

                    let event_file_data = {
                        filename: new_filename,
                    };

                    ae_promises.update__event_file_obj = events_func.update_ae_obj__event_file({
                        api_cfg: $ae_api,
                        event_file_id: event_file_obj.event_file_id_random,
                        data_kv: event_file_data,
                        log_lvl: 0
                    })
                    .then (function (update_results) {
                        console.log(`Update results:`, update_results);
                        $events_sess.pres_mgmt.show_field_edit__filename = false;
                    });
                }}
                class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-success"
                title="Save changes"
                >
                {#await ae_promises.update__event_file_obj}
                    <span class="fas fa-spinner fa-spin mx-1"></span>
                    <span class="">Saving {event_file_obj.extension}</span>
                {:then}
                    <span class="fas fa-save mx-1"></span>
                    Save {event_file_obj.extension} filename?
                {/await}
            </button>
            {/if}
        </span>
        {/if}

    </td>

    {#if display_mode === 'default'}
    <td
        class="event_file__options"
        class:hidden={!allow_basic && !$ae_loc.trusted_access}
        >
        <div class="flex flex-col gap-1 text-sm">
        <button
            type="button"
            disabled={!allow_basic && !$ae_loc.trusted_access}
            onclick={() => {
                if ($events_sess.pres_mgmt.show_field_edit__filename == event_file_obj.event_file_id_random) {
                    $events_sess.pres_mgmt.tmp_val__filename_no_ext = '';
                    $events_sess.pres_mgmt.show_field_edit__filename = false;
                } else {
                    $events_sess.pres_mgmt.tmp_val__filename_no_ext = event_file_obj.filename_no_ext;
                    $events_sess.pres_mgmt.show_field_edit__filename = event_file_obj.event_file_id_random;
                }
            }}
            class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-success"
            class:preset-tonal-warning={$events_sess.pres_mgmt.show_field_edit__filename == event_file_obj.event_file_id_random}
            title={`Rename this file? "${event_file_obj.filename}"`}
            >
            <span class="fas fa-edit mx-1"></span>
            {#if $events_sess.pres_mgmt?.show_field_edit__filename == event_file_obj.event_file_id_random}
                Cancel?
            {:else}
                Rename
            {/if}
        </button>

        <button
            type="button"
            disabled={!allow_basic && !$ae_loc.trusted_access}
            onclick={async () => {
                let event_file_data = {
                    hide: !event_file_obj.hide,
                };

                ae_promises.update__event_file_obj = events_func.update_ae_obj__event_file({
                    api_cfg: $ae_api,
                    event_file_id: event_file_obj.event_file_id_random,
                    data_kv: event_file_data,
                    log_lvl: 0
                })
                .then (function (update_results) {
                    console.log(`Update results:`, update_results);

                    let params = {
                        qry__enabled: 'all',
                        qry__hidden: 'all',
                    }

                    events_func.load_ae_obj_li__event_file({
                        api_cfg: $ae_api,
                        for_obj_type: link_to_type,
                        for_obj_id: link_to_id,
                        params: params,
                        try_cache: true
                    });
                });
            }}
            class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-success"
            title="Hide this file from the presentation launcher"
            >

            <!-- Users see this as the "Archive" option button -->
            <!-- {@html (event_file_obj?.hide ? '<span class="fas fa-archive m-1"></span> Unarchive' : '<span class="fas fa-archive m-1"></span> Archive')} -->

            {#await ae_promises.update__event_file_obj}
                <span class="fas fa-spinner fa-spin mx-1"></span>
                <span class="">Saving {event_file_obj.extension}</span>
            {:then}
                {#if event_file_obj.hide}
                <span class="fas fa-eye m-1"></span> Unhide File
                {:else}
                <span class="fas fa-eye-slash m-1"></span> Hide
                {/if}

                <!-- {@html (event_file_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')} -->
                <!-- <span class="fas fa-save mx-1"></span>
                Save {event_file_obj.extension} filename? -->
            {/await}
        </button>



        <button
            type="button"
            disabled={!allow_basic && !$ae_loc.trusted_access}
            onclick={async () => {
                if (!confirm(`Are you sure you want to delete this file?\n${event_file_obj.filename} [${event_file_obj.event_file_id_random}]`)) {return false;}

                // ae_promises[event_file_obj.event_file_id_random] = handle_delete__event_file({event_file_id: event_file_obj.event_file_id_random});

                ae_promises.delete__event_file_obj = await events_func.delete_ae_obj_id__event_file({
                    api_cfg: $ae_api,
                    event_file_id: event_file_obj.event_file_id_random,
                    log_lvl: 1
                })
            }}
            class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-success"
            title="Delete this file"
            >
            <span class="fas fa-trash-alt mx-1"></span>
            <!-- <span class="fas fa-minus mx-1"></span> -->
            Delete
        </button>
        </div>
    </td>
    {/if}

    {#if display_mode === 'default'}
    <td
        class="event_file__status"
        class:hidden={!allow_basic && !$ae_loc.trusted_access}
        >
        <div class="flex flex-col gap-1 items-center text-sm">

        <div class="">
            {#if event_file_obj.open_in_os == 'win'}

                MS Windows <span class="fab fa-windows"></span>

            {:else if event_file_obj.open_in_os == 'mac'}

                Apple macOS <span class="fab fa-apple"></span>

            {/if}
        </div>

        <!-- Select from options for the purpose of this file -->
        <div>
            <label
                for="file_purpose"
                class="text-sm mx-1 hidden"
                >
                Purpose:
            </label>
            <select
                id="file_purpose"
                name="file_purpose"
                disabled={!allow_basic && !allow_moderator && !$ae_loc.trusted_access}
                value={event_file_obj.file_purpose}
                onchange={e => {
                    // ae_tmp[event_file_obj.event_file_id_random].file_purpose = e.target.value;
                    console.log(`Selected file_purpose: ${e.target.value}`);

                    let event_file_data = {
                        event_file_id_random: event_file_obj.event_file_id_random,
                        file_purpose: e.target.value,
                    };

                    events_func.update_ae_obj__event_file({
                            api_cfg: $ae_api,
                            event_file_id: event_file_obj.event_file_id_random,
                            data_kv: event_file_data,
                            log_lvl: 1
                    })
                    .then (function (update_results) {
                        console.log(`Update results:`, update_results);
                        $slct_trigger = 'load__event_file_obj_li';
                    });



                    // ae_triggers.update_event_file_purpose = true;
                }}
                class="select min-w-fit max-w-fit text-sm mx-1 border border-gray-300 rounded-md p-1 hover:border-gray-400"
                >
                <option value={null} selected={!event_file_obj.file_purpose} class="text-xs">-- purpose not set --</option>
                {#if $events_loc.pres_mgmt?.file_purpose_option_kv}
                    {#each Object.entries($events_loc.pres_mgmt.file_purpose_option_kv) as [key, file_purpose_option]}
                        <option
                            value={key} selected={event_file_obj.file_purpose === key}
                            disabled={file_purpose_option?.disabled}
                            class:hidden={file_purpose_option?.hidden}
                            >
                            {file_purpose_option?.name}
                        </option>
                    {/each}
                {/if}
                <!-- <option value="outline" selected={event_file_obj.file_purpose === 'outline'}>1. Outline</option> -->
                <!-- <option value="draft" selected={event_file_obj.file_purpose === 'draft'}>2. Draft</option> -->
                <!-- <option value="final" selected={event_file_obj.file_purpose === 'final'}>3. Final</option> -->
                <!-- <option value="supporting">X. Supporting File (audio, video, data, etc)</option> -->
                <!-- <option value="handout">X. Handout</option> -->
                <!-- <option value="other">X. Other</option> -->
                <!-- <option value="poster">Final - Poster</option> -->
                <!-- <option value="presentation">Final - Presentation</option> -->
                <!-- Shows in session room -->
            </select>
        </div>

        </div>

    </td>
    {/if}

    <td class="event_file_info file_meta text-gray-500">
        <div
            class="flex flex-col gap-0.5 text-xs"

            >
        <!-- {event_file_obj.hosted_file_content_type} -->

        <span class="w-full flex flex-col lg:flex-row justify-between">
        <span
            class:hidden={display_mode != 'default'}
            >
            Type:
            <strong>{event_file_obj.extension} <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
            </strong>
            <!-- {#if event_file_obj.open_in_os == 'win'}
                <strong>
                MS Windows <span class="fab fa-windows"></span>
                </strong>
            {:else if event_file_obj.open_in_os == 'mac'}
                <strong>
                Apple macOS <span class="fab fa-apple"></span>
                </strong>
            {/if} -->

        </span>
        <span>
            <span
                class:hidden={display_mode != 'default'}
                >
                Size:
            </span>
            <strong>{ae_util.format_bytes(event_file_obj.file_size)}</strong>
        </span>
        </span>

        <span class="w-full flex flex-col lg:flex-row justify-between">
        <span title="SHA 256: {event_file_obj.hash_sha256}">
            <span
                class:hidden={display_mode != 'default'}
                >
                Hash:
            </span>
            <strong
                class:font-normal={display_mode != 'default'}
                >{event_file_obj.hash_sha256.slice(0, 10)}…</strong>
        </span>
        <span
            class:hidden={!$ae_loc.administrator_access || display_mode != 'default'}>
            <span
                class:hidden={display_mode != 'default'}
                >
                ID:
            </span>
            <strong>{event_file_obj.hosted_file_id_random}</strong>
        </span>
        </span>

        <!-- If this file was uploaded (created) within the last 15 minutes we want to highlight it in blue. -->
        <span
            class:bg-yellow-200={ae_util.is_datetime_recent({datetime: event_file_obj?.created_on, minutes: 30})}
            class:bg-green-200={ae_util.is_datetime_recent({datetime: event_file_obj?.created_on, minutes: 240})}
            class:bg-blue-200={ae_util.is_datetime_recent({datetime: event_file_obj?.created_on, minutes: 2880})}
            >
            {#if display_mode == 'default'}
                <!-- <span class="fas fa-cloud-upload-alt mx-1"></span> -->
                <!-- Uploaded: -->
                <!-- <span class="fas fa-calendar-day mx-1"></span> -->
                <span class="fas fa-clock mx-1"></span>
                <strong>
                {ae_util.iso_datetime_formatter(event_file_obj.created_on, 'dddd')}
                </strong>
                {ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_iso')}
                at
                <strong>{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_12_short_no_leading')}</strong>
                <!-- {event_file_obj.updated_on} -->
             {:else}
                <!-- <span class="fas fa-calendar-day mx-1"></span> -->
                <strong>
                {ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_short')}
                <!-- at -->
                <strong>{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_12_short_no_leading')}</strong>
                </strong>
            {/if}
        </span>

        </div>
    </td>
</tr>
{/each}

    </tbody>
</table>
</div>

{:else}

<p
    class="w-96 text-center text-gray-500"
    class:hidden={display_mode != 'default'}
    >
    No files uploaded to display
</p>

{/if}

</section>


<style>

</style>