<script lang="ts">
    let { simName, resourceName } = $props();

    function getResourceUrl(simName: string, resourceName: string) {
        return `/results/${simName}/${resourceName}`;
    }

    function isImage(fname: string) {
        return (
            fname.toLowerCase().endsWith(".png") ||
            fname.toLowerCase().endsWith(".jpg") ||
            fname.toLowerCase().endsWith(".jpeg")
        );
    }

    function isVideo(fname: string) {
        return (
            fname.toLowerCase().endsWith(".mp4") ||
            fname.toLowerCase().endsWith(".avi") ||
            fname.toLowerCase().endsWith(".webm")
        );
    }
</script>

<div class="media-item">
    <div class="media-title">
        {resourceName}
        <a href={getResourceUrl(simName, resourceName)} download class="dl-link"
            >[Download]</a
        >
    </div>
    {#if isImage(resourceName)}
        <img src={getResourceUrl(simName, resourceName)} alt={resourceName} />
    {:else if isVideo(resourceName)}
        <video controls>
            <source
                src={getResourceUrl(simName, resourceName)}
                type="video/webm"
            />
            <source
                src={getResourceUrl(simName, resourceName)}
                type="video/mp4"
            />
            <a href={getResourceUrl(simName, resourceName)}>Download Video</a>
        </video>
    {:else}
        <ul>
            <li>
                <a
                    href={getResourceUrl(simName, resourceName)}
                    target="_blank"
                    download>{resourceName}</a
                >
            </li>
        </ul>
    {/if}
</div>

<style>
    img,
    video {
        max-width: 600px;
        border: 1px solid #000;
        margin-bottom: 15px;
    }
    .media-item {
        margin-bottom: 20px;
    }
    .media-title {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .dl-link {
        font-weight: normal;
        margin-left: 10px;
        font-size: 14px;
    }
    ul {
        list-style-type: square;
    }
    a {
        color: #0000ff;
        text-decoration: underline;
    }
    a:visited {
        color: #800080;
    }
</style>
