<script lang="ts">
import { onMount } from 'svelte';
// import { liveQuery } from "dexie";
import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';

import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import { api } from '$lib/ae_api/api';

// import { core_func } from '$lib/ae_core_functions';
import {
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import {
    events_sess,
    events_slct,
    events_trigger
} from '$lib/stores/ae_events_stores';
import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';
import { events_func } from '$lib/ae_events/ae_events_functions';
import AE_Comp_Hosted_Files_Download_Button from '$lib/elements/ae_comp__hosted_files_download_button.svelte';
import {
    Check,
    Clock,
    Download,
    Eye,
    EyeOff,
    FileImage,
    FolderOpen,
    Laptop,
    LoaderCircle,
    Monitor,
    OctagonAlert,
    Pencil,
    RefreshCw,
    Save,
    Trash2,
    TriangleAlert
} from '@lucide/svelte';
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'
    // WHY: event_file.event_session_type_code is NULL for presenter-linked files because
    // v_event_file joins event_session only via event_file.event_session_id, which is NULL
    // when for_type='event_presenter'. The wrapper derives the correct type from the
    // presenter → presentation → session chain and passes it here as context.
    context_session_type_code?: string | null;
}

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',
    context_session_type_code = null
}: 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 = pres_mgmt_loc.current.show__direct_download;

// Strip :443 from https URLs — redundant and clutters shareable links.
let base_url = $derived($ae_api.base_url.replace(/^(https:\/\/[^/:]+):443(\/|$)/, '$1$2'));
// 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);

// PDF → Image conversion state (keyed by event_file_id)
// WHY: Poster sessions display files in the Launcher modal via <img> tag — PDFs can't render there.
// Presenters upload PDFs which must be converted server-side to high-res webp images.
// Button is only shown in edit_mode for PDF files linked to a poster-type session.
// Backend: /v3/action/hosted_file/{id}/convert_file runs pdf2image (3840px wide, first page only)
// and saves the result as a new hosted_file record linked to the same parent object.
type ConvertStatus = 'idle' | 'converting' | 'done' | 'error';
let convert_status_kv: Record<string, ConvertStatus> = $state({});
let convert_result_kv: key_val = $state({});

async function handle_convert_pdf_to_image(event_file_obj: key_val) {
    const file_id = event_file_obj.event_file_id;
    convert_status_kv[file_id] = 'converting';
    try {
        // Link the new image to the most specific parent available
        const link_to_type_val = event_file_obj.event_session_id
            ? 'event_session'
            : event_file_obj.event_presentation_id
              ? 'event_presentation'
              : 'event';
        const link_to_id_val =
            event_file_obj.event_session_id ||
            event_file_obj.event_presentation_id ||
            event_file_obj.event_id;
        const filename_no_ext = (
            event_file_obj.filename ?? 'poster_image'
        ).replace(/\.pdf$/i, '');
        const url =
            `${$ae_api.base_url}/v3/hosted_file/${event_file_obj.hosted_file_id}/convert_file` +
            `?link_to_type=${encodeURIComponent(link_to_type_val)}` +
            `&link_to_id=${encodeURIComponent(link_to_id_val)}` +
            `&filename_no_ext=${encodeURIComponent(filename_no_ext)}` +
            `&to_type=webp`;
        const resp = await fetch(url, {
            headers: {
                'x-aether-api-key': $ae_api.api_secret_key,
                'x-account-id': String($ae_api.account_id ?? '')
            }
        });
        const body = await resp.json();
        if (resp.ok && body?.data) {
            convert_result_kv[file_id] = body.data;
            convert_status_kv[file_id] = 'done';
        } else {
            console.error('[convert_pdf] API error:', body);
            convert_status_kv[file_id] = 'error';
        }
    } catch (err) {
        console.error('[convert_pdf] Fetch failed:', err);
        convert_status_kv[file_id] = 'error';
    }
}
</script>

<div class="float-right flex flex-row items-center">
    <button
        type="button"
        onclick={async () => {
            await events_func.load_ae_obj_li__event_file({
                api_cfg: $ae_api,
                for_obj_type: link_to_type,
                for_obj_id: link_to_id,
                enabled: 'all',
                hidden: 'all',
                try_cache: true
            });
        }}
        class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-warning border-warning-500 m-1 border p-1 transition hover:transition-all *:hover:inline"
        class:hidden={!$ae_loc.edit_mode || !$ae_loc.authenticated_access}
        title="Refresh the list of files">
        <RefreshCw size="1em" class="m-1" />
        <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 preset-tonal-tertiary hover:preset-tonal-warning border-warning-500 m-1 border p-1 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">
        <Download size="1em" class="m-1" />
        <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="preset-filled-surface-300-700 rounded-lg px-4 text-xl font-bold"
            title="Files for {link_to_type ?? '-- not set --'}: {link_to_id ??
                '-- not set --'} (files: {$lq__event_file_obj_li?.length ??
                'None'})">
            <FolderOpen size=".9em" class="text-surface-800-200" />
            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
            {@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="w-full overflow-auto">
            <table class="w-full table-auto">
                {#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 (event_file_obj.event_file_id)}
                        {@const ExtIcon = ae_util.file_extension_icon_lucide(
                            event_file_obj.extension
                        )}
                        <tr
                            class="ae_obj obj_event_file border-surface-200-800 hover:bg-surface-100-900 hover:border-surface-300-700 border-t border-b transition-colors duration-200"
                            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}
                                    <div class="flex flex-col gap-2">
                                        <AE_Comp_Hosted_Files_Download_Button
                                            hosted_file_id={event_file_obj?.hosted_file_id}
                                            hosted_file_obj={event_file_obj}
                                            show_divider={true}
                                            show_direct_download={ae_tmp.show__direct_download}
                                            max_filename={30}
                                            classes="btn btn-sm lg:btn-md preset-tonal-primary hover:preset-filled-primary-500 min-w-72 lg:min-w-96" />

                                        <!-- PDF → webp convert button: only for poster sessions in edit mode -->
                                        {#if $ae_loc.edit_mode && event_file_obj?.extension === 'pdf' && (event_file_obj?.event_session_type_code === 'poster' || context_session_type_code === 'poster')}
                                            <div>
                                                {#if !convert_status_kv[event_file_obj.event_file_id] || convert_status_kv[event_file_obj.event_file_id] === 'idle'}
                                                    <button
                                                        type="button"
                                                        class="btn btn-sm preset-tonal-warning border-warning-500 border"
                                                        title="Convert this PDF to a high-res webp image for use in the Launcher poster display."
                                                        onclick={() =>
                                                            handle_convert_pdf_to_image(
                                                                event_file_obj
                                                            )}>
                                                        <FileImage
                                                            size="1em"
                                                            class="mx-1" />
                                                        Convert PDF → Image
                                                    </button>
                                                {:else if convert_status_kv[event_file_obj.event_file_id] === 'converting'}
                                                    <span
                                                        class="btn btn-sm preset-tonal-surface cursor-wait opacity-60">
                                                        <LoaderCircle
                                                            size="1em"
                                                            class="mx-1 animate-spin" />
                                                        Converting…
                                                    </span>
                                                {:else if convert_status_kv[event_file_obj.event_file_id] === 'done'}
                                                    <span
                                                        class="btn btn-sm preset-tonal-success"
                                                        title="Conversion complete. New webp hosted_file created: {convert_result_kv[
                                                            event_file_obj
                                                                .event_file_id
                                                        ]?.filename ?? ''}">
                                                        <Check
                                                            size="1em"
                                                            class="mx-1" />
                                                        Done — {convert_result_kv[
                                                            event_file_obj
                                                                .event_file_id
                                                        ]?.filename ??
                                                            'image created'}
                                                    </span>
                                                {:else if convert_status_kv[event_file_obj.event_file_id] === 'error'}
                                                    <button
                                                        type="button"
                                                        class="btn btn-sm preset-tonal-error border-error-500 border"
                                                        title="Conversion failed. Click to retry."
                                                        onclick={() => {
                                                            convert_status_kv[
                                                                event_file_obj.event_file_id
                                                            ] = 'idle';
                                                        }}>
                                                        <TriangleAlert
                                                            size="1em"
                                                            class="mx-1" />
                                                        Failed — Retry?
                                                    </button>
                                                {/if}
                                            </div>
                                        {/if}

                                        {#if ae_tmp.show__direct_download}
                                            <div
                                                class="bg-surface-100/50 border-surface-500/10 flex flex-col gap-0.5 rounded-lg border px-4 py-2">
                                                <div
                                                    class="flex flex-row items-center gap-2">
                                                    <span
                                                        class="w-24 text-[10px] font-bold uppercase opacity-50">
                                                        Access Link:
                                                    </span>
                                                    <MyClipboard
                                                        value={encodeURI(
                                                            `${base_url}/v3/action/event_file/${event_file_obj?.event_file_id}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&key=${$ae_api.account_id}`
                                                        )}
                                                        btn_text="Copy Original"
                                                        btn_title="Copy the direct download link to the clipboard."
                                                        btn_class="btn btn-xs preset-tonal-warning hover:preset-filled-warning-500"
                                                    ></MyClipboard>

                                                    <MyClipboard
                                                        value={encodeURI(
                                                            `${base_url}/v3/action/event_file/${event_file_obj?.event_file_id}/download?filename=${ae_util.clean_filename(event_file_obj?.event_session_code ?? '')}_${ae_util.clean_filename(event_file_obj?.event_presentation_name ?? event_file_obj?.event_session_name ?? '').substring(0, 30)}_${ae_util.clean_filename(event_file_obj?.event_presenter_full_name ?? '')}.${event_file_obj?.extension}&key=${$ae_api.account_id}`
                                                        )}
                                                        btn_text="Copy Renamed"
                                                        btn_title="Copy the renamed download link to the clipboard. Format: [session-code]_[presentation-name]_[presenter-name].[ext]"
                                                        btn_class="btn btn-xs preset-tonal-warning hover:preset-filled-warning-500"
                                                    ></MyClipboard>
                                                </div>
                                            </div>
                                        {/if}
                                    </div>
                                {: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 bg-warning-100 min-w-72 text-sm lg:min-w-96"
                                            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,
                                                                    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}
                                                    <LoaderCircle
                                                        size="1em"
                                                        class="mx-1 animate-spin" />
                                                    <span class=""
                                                        >Saving {event_file_obj.extension}</span>
                                                {:then}
                                                    <Save
                                                        size="1em"
                                                        class="mx-1" />
                                                    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
                                                ) {
                                                    $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;
                                                }
                                            }}
                                            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}
                                            title={`Rename this file? "${event_file_obj.filename}"}`}>
                                            <Pencil size="1em" class="mx-1" />
                                            {#if $events_sess.pres_mgmt?.show_field_edit__filename == event_file_obj.event_file_id}
                                                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,
                                                                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,
                                                                        enabled:
                                                                            'all',
                                                                        hidden: 'all',
                                                                        // 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}
                                                <LoaderCircle
                                                    size="1em"
                                                    class="mx-1 animate-spin" />
                                                <span class=""
                                                    >Saving {event_file_obj.extension}</span>
                                            {:then}
                                                {#if event_file_obj.hide}
                                                    <Eye
                                                        size="1em"
                                                        class="m-1" /> Unhide File
                                                {:else}
                                                    <EyeOff
                                                        size="1em"
                                                        class="m-1" /> Hide
                                                {/if}
                                            {/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}]`
                                                    )
                                                ) {
                                                    return false;
                                                }

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

                                                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,
                                                            log_lvl: 1
                                                        }
                                                    );
                                            }}
                                            class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-success"
                                            title="Delete this file">
                                            <Trash2 size="1em" class="mx-1" />
                                            <!-- <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 items-center justify-center gap-1 text-sm">
                                        <div class="">
                                            {#if event_file_obj.open_in_os == 'win'}
                                                MS Windows <Monitor
                                                    size="1em"
                                                    class="inline-block" />
                                            {:else if event_file_obj.open_in_os == 'mac'}
                                                Apple macOS <Laptop
                                                    size="1em"
                                                    class="inline-block" />
                                            {/if}
                                        </div>

                                        <!-- Select from options for the purpose of this file -->
                                        <div>
                                            <label
                                                for="file_purpose"
                                                class="mx-1 hidden text-sm">
                                                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].file_purpose = (e.target as HTMLInputElement).value;
                                                    console.log(
                                                        `Selected file_purpose: ${(e.target as HTMLInputElement).value}`
                                                    );

                                                    let event_file_data = {
                                                        file_purpose: (
                                                            e.target as HTMLInputElement
                                                        ).value
                                                    };

                                                    events_func
                                                        .update_ae_obj__event_file(
                                                            {
                                                                api_cfg:
                                                                    $ae_api,
                                                                event_file_id:
                                                                    event_file_obj.event_file_id,
                                                                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 border-surface-300-700 bg-surface-50-900 hover:border-surface-400-600 mx-1 max-w-fit min-w-fit rounded-md border p-1 text-xs transition-colors duration-200">
                                                <option
                                                    value={null}
                                                    selected={!event_file_obj.file_purpose}
                                                    >-- purpose not set --</option>
                                                {#if pres_mgmt_loc.current.file_purpose_option_kv}
                                                    {#each Object.entries(pres_mgmt_loc.current.file_purpose_option_kv as any) as [key, file_purpose_option] (key)}
                                                        <option
                                                            value={key}
                                                            selected={event_file_obj.file_purpose ===
                                                                key}
                                                            disabled={(
                                                                file_purpose_option as any
                                                            )?.disabled &&
                                                                !$ae_loc.edit_mode}
                                                            class:hidden={(
                                                                file_purpose_option as any
                                                            )?.hidden &&
                                                                !$ae_loc.edit_mode}>
                                                            {(
                                                                file_purpose_option as any
                                                            )?.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="flex w-full flex-col justify-between lg:flex-row">
                                        <span
                                            class:preset-tonal-error={event_file_obj.extension == 'doc' || event_file_obj.extension == 'ppt' || event_file_obj.extension == 'xls'}
                                            class:hidden={display_mode !=
                                                'default'}
                                            title={(event_file_obj.extension == 'doc' || event_file_obj.extension == 'ppt' || event_file_obj.extension == 'xls') ? `WARNING: Microsoft 2003 legacy file type. Please resave this in a modern PowerPoint, Word, or Excel format!\nFile type = ${event_file_obj.extension}\nContent type = ${event_file_obj.content_type}` : `File type = ${event_file_obj.extension}\nContent type = ${event_file_obj.content_type}`}
                                            >
                                            Type:
                                            <strong
                                                >
                                                <ExtIcon
                                                    size="1em"
                                                    class="inline-block" />
                                                {event_file_obj.extension}
                                                {#if event_file_obj.extension == 'doc' || event_file_obj.extension == 'ppt' || event_file_obj.extension == 'xls'}
                                                <!-- Legacy warning icon -->
                                                <OctagonAlert
                                                    size="1em"
                                                    class="inline-block" />
                                                {/if}
                                            </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="flex w-full flex-col justify-between lg:flex-row">
                                        <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}</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> -->
                                            <Clock size="1em" class="mx-1" />
                                            <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>
