<script lang="ts">
interface Props {
    // Exports
    container_class_li?: string | Array<string>;
    event_file_id_random_li?: Array<string>;
    lq__event_file_obj_li: any;
    allow_basic?: boolean;
    allow_moderator?: boolean;
    // export let max_records: number = 100;
    show_direct_download?: boolean;
    show_location_fields?: boolean;
    show_presentation_fields?: boolean;
    // export let show_presenter_fields: boolean = false;
    show_session_fields?: boolean;
    hide_session_code?: boolean;
    log_lvl?: number;
}

let {
    container_class_li = [],
    event_file_id_random_li = [],
    lq__event_file_obj_li,
    allow_basic = false,
    allow_moderator = false,
    show_direct_download = $bindable(false),
    show_location_fields = false,
    show_presentation_fields = false,
    show_session_fields = false,
    hide_session_code = false,
    log_lvl = $bindable(0)
}: Props = $props();

// Imports
// import { liveQuery } from 'dexie';

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 { db_events } from '$lib/ae_events/db_events';
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
// import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/stores/ae_events_stores';
// import { events_func } from '$lib/ae_events/ae_events_functions';
import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
import AE_Comp_Hosted_Files_Download_Button from '$lib/elements/ae_comp__hosted_files_download_button.svelte';
import {
    Check,
    Download,
    FileImage,
    FileSpreadsheet,
    ListOrdered,
    LoaderCircle,
    Presentation,
    ToggleLeft,
    ToggleRight,
    TriangleAlert,
    User
} from '@lucide/svelte';
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'

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

// *** Functions and Logic

// Define the list of unacceptable characters if not using the default.
// const unacceptable_chars = /[ <>:"/\\|?*]/g;

let horiz_scroll_warning: boolean = $state(false);
let horiz_check_element: HTMLElement | null = $state(null);

// 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: Record<string, any> = $state({});

async function handle_convert_pdf_to_image(event_file_obj: any) {
    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 = event_file_obj.event_session_id
            ? 'event_session'
            : event_file_obj.event_presentation_id
              ? 'event_presentation'
              : 'event';
        const link_to_id =
            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)}` +
            `&link_to_id=${encodeURIComponent(link_to_id)}` +
            `&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';
    }
}

// Check if element is scrolling horizontally
$effect(() => {
    if (
        horiz_check_element &&
        horiz_check_element.scrollWidth > horiz_check_element.offsetWidth
    ) {
        horiz_scroll_warning = true;
        // console.log('Element is too wide for the container. Horizontal scrolling detected.');
    } else {
        horiz_scroll_warning = false;
        // console.log('Element fits within the container. No horizontal scrolling.', horiz_check_element);
    }
});

function generate_file_export_csv(ae_obj_li: any[]) {
    console.log(`*** generate_file_export_csv() ***`, ae_obj_li);

    // We need to create a list with the column names and then a list of lists with the data.
    let csv_data = [];
    let csv_columns = [
        'File ID',
        'Filename',
        'Extension',
        'Size',
        'SHA256 Hash',
        'Uploaded On',
        'Updated On',
        'Session ID',
        'Session Code',
        'Session Name',
        'Session Start Datetime',
        'Presentation ID',
        'Presentation Name',
        'Presentation Time',
        'Presenter ID',
        'Name',
        'Email',
        'Download Link',
        'Download Link - Session Code'
    ];
    csv_data.push(csv_columns);

    for (let i = 0; i < ae_obj_li.length; i++) {
        let csv_row = [];
        csv_row.push(ae_obj_li[i].event_file_id);
        csv_row.push(
            ae_obj_li[i].filename
                ? `"${ae_util.clean_filename(ae_obj_li[i].filename)}"`
                : ''
        );
        csv_row.push(ae_obj_li[i].extension ? ae_obj_li[i].extension : '');
        csv_row.push(
            ae_obj_li[i].file_size || ae_obj_li[i].hosted_file_size
                ? ae_util.format_bytes(
                      ae_obj_li[i].file_size || ae_obj_li[i].hosted_file_size
                  )
                : ''
        );
        csv_row.push(ae_obj_li[i].hash_sha256?.slice(0, 10) ?? 'N/A');
        csv_row.push(
            ae_obj_li[i].created_on
                ? ae_util.iso_datetime_formatter(
                      ae_obj_li[i].created_on,
                      'datetime_iso_12_no_seconds'
                  )
                : ''
        );
        csv_row.push(
            ae_obj_li[i].updated_on
                ? ae_util.iso_datetime_formatter(
                      ae_obj_li[i].updated_on,
                      'datetime_iso_12_no_seconds'
                  )
                : ''
        );

        csv_row.push(
            ae_obj_li[i].event_session_id ? ae_obj_li[i].event_session_id : ''
        );
        csv_row.push(
            ae_obj_li[i].event_session_code
                ? ae_obj_li[i].event_session_code
                : ''
        );
        csv_row.push(ae_obj_li[i].event_session_name ?? '');
        csv_row.push(
            ae_obj_li[i].event_session_start_datetime
                ? ae_util.iso_datetime_formatter(
                      ae_obj_li[i].event_session_start_datetime,
                      'datetime_iso_12_no_seconds'
                  )
                : ''
        );

        csv_row.push(
            ae_obj_li[i].event_presentation_id
                ? ae_obj_li[i].event_presentation_id
                : ''
        );
        csv_row.push(ae_obj_li[i].event_presentation_name ?? '');
        csv_row.push(
            ae_obj_li[i].event_presentation_start_datetime
                ? ae_util.iso_datetime_formatter(
                      ae_obj_li[i].event_presentation_start_datetime,
                      'datetime_iso_12_no_seconds'
                  )
                : ''
        );

        csv_row.push(
            ae_obj_li[i].event_presenter_id
                ? ae_obj_li[i].event_presenter_id
                : ''
        );
        csv_row.push(ae_obj_li[i].event_presenter_full_name ?? '');
        csv_row.push(
            ae_obj_li[i].event_presenter_email
                ? ae_obj_li[i].event_presenter_email
                : ''
        );

        csv_row.push(
            encodeURI(
                `${$ae_api.base_url}/event/file/${ae_obj_li[i]?.event_file_id}/download?filename=${ae_util.clean_filename(ae_obj_li[i]?.filename)}&key=${$ae_api.account_id}`
            )
        );

        csv_row.push(
            encodeURI(
                `${$ae_api.base_url}/event/file/${ae_obj_li[i]?.event_file_id}/download?filename=${ae_obj_li[i]?.event_session_code}-${ae_util.clean_filename(ae_obj_li[i]?.filename)}&key=${$ae_api.account_id}`
            )
        );

        csv_data.push(csv_row);
    }

    console.log('CSV Data:', csv_data);

    let csv_content_str = '';
    csv_data.forEach(function (row) {
        csv_content_str += row.join(';');
        csv_content_str += '\n';
    });

    const blob = new Blob([csv_content_str], {
        type: 'text/csv;charset=utf-8;'
    });
    const obj_url = URL.createObjectURL(blob);

    const download_link = document.createElement('a');
    download_link.setAttribute('href', obj_url);
    download_link.setAttribute(
        'download',
        `file_list_${ae_util.iso_datetime_formatter()}.csv`
    );
    download_link.setAttribute('style', 'display: none;');
    download_link.textContent = 'Download CSV';

    const container = document.getElementById('download_csv_container');
    if (container) {
        container.appendChild(download_link);
    } else {
        document.body.appendChild(download_link);
    }

    // Automatically download the file
    download_link.click();

    return csv_data;
}
</script>

<section
    class:border-r-2={horiz_scroll_warning}
    class:border-dashed={horiz_scroll_warning}
    class:border-warning-900-100={horiz_scroll_warning}
    class="ae_comp event_file_obj_tbl {container_class_li} container max-w-screen overflow-auto">
    <!-- {#if event_file_id_random_li && $lq_kv__event_file_obj_li && $lq_kv__event_file_obj_li?.length > 0 && $lq_kv__event_file_obj_li?.length == event_file_id_random_li?.length} -->
    {#if $lq__event_file_obj_li && $lq__event_file_obj_li?.length}
        <div
            bind:this={horiz_check_element}
            id="tbl_container"
            class="space-y-2 pb-8">
            <header
                class="flex flex-row flex-wrap items-center justify-between gap-1">
                <h2 class="h3">
                    <span class="text-base"> Results: </span>

                    {#if $lq__event_file_obj_li.length}
                        <span
                            class="preset-filled-success-100-900 rounded-lg px-4 text-3xl font-bold"
                            title="Count {$lq__event_file_obj_li.length ??
                                'None'}">
                            <ListOrdered size="1em" class="mx-4" />
                            {$lq__event_file_obj_li.length ?? 'None'}&times;
                        </span>
                    {/if}
                </h2>

                <div
                    class="flex flex-row flex-wrap items-center justify-end gap-1"
                    class:hidden={!$ae_loc.edit_mode}>
                    <button
                        type="button"
                        class="btn btn-sm preset-tonal-warning border-warning-500 generate_csv_btn mb-1 border"
                        onclick={() => {
                            if (
                                !confirm(
                                    'Generate and download a CSV file with the file list?'
                                )
                            ) {
                                return false;
                            }

                            let csv_data = generate_file_export_csv(
                                $lq__event_file_obj_li
                            );
                            console.log('CSV Data:', csv_data);
                        }}>
                        <FileSpreadsheet size="1em" class="mx-1" />
                        Export Files CSV
                    </button>
                    <span id="download_csv_container"></span>

                    {#if show_session_fields}
                        <button
                            type="button"
                            onclick={() => {
                                show_session_fields = !show_session_fields;
                            }}
                            class="btn btn-sm {show_session_fields
                                ? 'ae_btn_surface'
                                : 'ae_btn_surface_outlined'}"
                            title="Show or hide the session-related column fields.">
                            <ToggleRight size="1em" class="m-1" />
                            Showing Session Fields
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                show_session_fields = !show_session_fields;
                            }}
                            class="btn btn-sm {show_session_fields
                                ? 'ae_btn_surface'
                                : 'ae_btn_surface_outlined'}"
                            title="Show or hide the session-related column fields.">
                            <ToggleLeft size="1em" class="m-1" />
                            Show Session Fields
                        </button>
                    {/if}

                    <!-- Show or hide the session code -->
                    {#if !hide_session_code}
                        <button
                            type="button"
                            onclick={() => {
                                hide_session_code = true;
                            }}
                            class="btn btn-sm ae_btn_surface"
                            title="Hide the session code column from view. Currently showing the Session Code column.">
                            <ToggleRight size="1em" class="m-1" />
                            Showing Session Code
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                hide_session_code = false;
                            }}
                            class="btn btn-sm ae_btn_surface_outlined"
                            title="Show the session code column. Currently hiding the Session Code column from view.">
                            <ToggleLeft size="1em" class="m-1" />
                            Show Session Code
                        </button>
                    {/if}

                    {#if show_presentation_fields}
                        <button
                            type="button"
                            onclick={() => {
                                show_presentation_fields =
                                    !show_presentation_fields;
                            }}
                            class="btn btn-sm {show_presentation_fields
                                ? 'ae_btn_surface'
                                : 'ae_btn_surface_outlined'}"
                            title="Show or hide the extra presentation-related column fields.">
                            <ToggleRight size="1em" class="m-1" />
                            Showing Presentation Fields
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                show_presentation_fields =
                                    !show_presentation_fields;
                            }}
                            class="btn btn-sm {show_presentation_fields
                                ? 'ae_btn_surface'
                                : 'ae_btn_surface_outlined'}"
                            title="Show or hide the extra presentation-related column fields.">
                            <ToggleLeft size="1em" class="m-1" />
                            Show Presentation Fields
                        </button>
                    {/if}
                </div>
            </header>

            <table
                class="table-striped table w-full table-auto text-xs lg:text-sm">
                <thead class="">
                    <tr>
                        <th class="px-4 py-2">
                            Filename
                            <!-- ({$lq__event_file_obj_li?.length}&times;) -->
                        </th>
                        <th
                            class="px-4 py-2"
                            class:hidden={!show_direct_download}>
                            Link
                        </th>
                        <th class="px-4 py-2">Size</th>
                        <th class="px-4 py-2">Uploaded</th>
                        {#if show_location_fields}
                            <th class="px-4 py-2">Location</th>
                        {/if}
                        {#if show_session_fields}
                            <th
                                class="px-4 py-2"
                                class:hidden={hide_session_code}>
                                Code
                            </th>
                            <th class="px-4 py-2"> Session </th>
                            <th class="px-4 py-2">Start datetime</th>
                        {/if}
                        {#if show_presentation_fields}
                            <th class="px-4 py-2">Presentation</th>
                            <th class="px-4 py-2">Presentation time</th>
                        {/if}
                        <th class="px-4 py-2">Name</th>
                        <!-- <th class="px-4 py-2">Email</th> -->
                        <!-- <th class="px-4 py-2">Agree</th> -->
                    </tr>
                </thead>
                <tbody class="">
                    {#each $lq__event_file_obj_li as event_file_obj (event_file_obj.event_file_id)}
                        <tr class:dim={event_file_obj?.hide}>
                            <td class="px-4 py-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}
                                    max_filename={50}
                                    classes="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500 min-w-72" />
                                <!-- 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'}
                                    <div class="mt-1">
                                        {#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}
                            </td>
                            <td
                                class="flex flex-col gap-0.5 px-4 py-2"
                                class:hidden={!show_direct_download}>
                                <div
                                    class:hidden={!show_direct_download}
                                    class="flex flex-row gap-0.5">
                                    <span class="w-32 text-xs text-gray-500">
                                        Original:
                                    </span>
                                    <a
                                        href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id}/download?filename={ae_util.clean_filename(
                                            event_file_obj?.filename
                                        )}&key={$ae_api.account_id}"
                                        class="btn btn-sm preset-tonal-secondary p-1 underline *:hover:inline lg:text-xs"
                                        title={`Download this file:\n${ae_util.clean_filename(event_file_obj?.filename)}\n[API] SHA256: ${event_file_obj?.hash_sha256?.slice(0, 10) ?? 'N/A'}\nHosted ID: ${event_file_obj?.hosted_file_id} Event File ID: ${event_file_obj?.event_file_id}`}>
                                        <Download size="1em" class="mx-1" />
                                        <span class="hidden"> Download </span>
                                    </a>

                                    <MyClipboard
                                        value={encodeURI(
                                            `${$ae_api.base_url}/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 Link"
                                        btn_title="Copy the direct download file link: {ae_util.clean_filename(
                                            event_file_obj?.filename ??
                                                'unknown'
                                        )}"
                                        btn_class="btn btn-sm p-1 preset-tonal-secondary lg:text-xs"
                                    ></MyClipboard>
                                </div>

                                <div
                                    class="flex flex-row gap-0.5"
                                    class:hidden={!show_direct_download}>
                                    <span class="w-32 text-xs text-gray-500">
                                        Session Name:
                                    </span>
                                    <a
                                        href="{$ae_api.base_url}/v3/action/event_file/{event_file_obj?.event_file_id}/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}&key={$ae_api.account_id}"
                                        class="btn btn-sm preset-tonal-secondary p-1 underline *:hover:inline lg:text-xs"
                                        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}`}>
                                        <Download size="1em" class="mx-1" />
                                        <span class="hidden"> Renamed </span>
                                    </a>

                                    <MyClipboard
                                        value={encodeURI(
                                            `${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id}/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}&key=${$ae_api.account_id}`
                                        )}
                                        btn_text="Copy Renamed"
                                        btn_title="Copy the renamed file link"
                                        btn_class="btn btn-sm p-1 preset-tonal-secondary lg:text-xs"
                                    ></MyClipboard>
                                </div>

                                <div
                                    class:hidden={!show_direct_download}
                                    class="flex flex-row gap-0.5">
                                    <span class="w-32 text-xs text-gray-500">
                                        Presentation Name:
                                    </span>
                                    <a
                                        href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id}/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}&key=${$ae_api.account_id}"
                                        class="btn btn-sm preset-tonal-secondary p-1 underline *:hover:inline lg:text-xs"
                                        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}`}>
                                        <Download size="1em" class="mx-1" />
                                        <span class="hidden"> Renamed </span>
                                    </a>

                                    <MyClipboard
                                        value={encodeURI(
                                            `${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id}/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}&key=${$ae_api.account_id}`
                                        )}
                                        btn_text="Copy Renamed"
                                        btn_title="Copy the renamed file link"
                                        btn_class="btn btn-sm p-1 preset-tonal-secondary lg:text-xs"
                                    ></MyClipboard>
                                </div>
                            </td>
                            <td class="px-4 py-2"
                                >{ae_util.format_bytes(
                                    event_file_obj?.file_size ||
                                        event_file_obj?.hosted_file_size
                                )}</td>
                            <td class="px-4 py-2">
                                <div>
                                    <span>
                                        {ae_util.iso_datetime_formatter(
                                            event_file_obj?.created_on,
                                            'dddd'
                                        )}
                                    </span>
                                    <span>
                                        {ae_util.iso_datetime_formatter(
                                            event_file_obj?.created_on,
                                            'date_long_month_day'
                                        )}
                                    </span>
                                </div>
                                <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
                                        }
                                    )}>
                                    {ae_util.iso_datetime_formatter(
                                        event_file_obj?.created_on,
                                        'time_12_short'
                                    )}
                                </span>
                            </td>
                            {#if show_location_fields}
                                <td class="px-4 py-2 lg:text-xs">
                                    {#if event_file_obj?.event_location_id}
                                        <!-- <span class="fas fa-map-marker-alt"></span> -->
                                        {event_file_obj?.event_location_name}
                                    {:else}
                                        {@html ae_snip.html__not_set}
                                    {/if}
                                </td>
                            {/if}

                            {#if show_session_fields}
                                <td
                                    class="px-4 py-2 lg:text-xs"
                                    class:hidden={hide_session_code}>
                                    {event_file_obj?.event_session_code ??
                                        '-- not set --'}
                                </td>
                                <td class="px-4 py-2 lg:text-xs">
                                    <Presentation size="1em" />
                                    <a
                                        href="/events/{event_file_obj?.event_id}/session/{event_file_obj?.event_session_id}"
                                        class="text-blue-500 underline hover:text-blue-800">
                                        {event_file_obj?.event_session_name}
                                    </a>
                                </td>
                                <td class="px-4 py-2"
                                    >{ae_util.iso_datetime_formatter(
                                        event_file_obj?.event_session_start_datetime,
                                        'datetime_iso_12_no_seconds'
                                    )}</td>
                            {/if}
                            {#if show_presentation_fields}
                                <td class="px-4 py-2 lg:text-xs">
                                    {#if event_file_obj?.event_presentation_id}
                                        {event_file_obj?.event_presentation_name}
                                    {:else}
                                        {@html ae_snip.html__not_set}
                                    {/if}
                                </td>
                                <td class="px-4 py-2">
                                    {#if event_file_obj?.event_presentation_id}
                                        {ae_util.iso_datetime_formatter(
                                            event_file_obj?.event_presentation_start_datetime,
                                            'time_12_short'
                                        )}
                                    {:else}
                                        {@html ae_snip.html__not_set}
                                    {/if}
                                </td>
                            {/if}
                            <td class="px-4 py-2">
                                {#if event_file_obj?.event_presenter_id}
                                    <User size="1em" />
                                    <a
                                        href="/events/{event_file_obj?.event_id}/presenter/{event_file_obj?.event_presenter_id}"
                                        class="text-blue-500 underline hover:text-blue-800">
                                        {event_file_obj?.event_presenter_full_name}
                                    </a>
                                {:else}
                                    <!-- <span class="text-gray-500">--</span> -->
                                    {@html ae_snip.html__not_set}
                                {/if}
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {:else}
        <p class="text-sm">No files available to show.</p>
    {/if}
</section>

<style>
.dim {
    opacity: 0.5;
    color: #999;
}
</style>
