<script lang="ts">
    let { simName, video1, video2, getResourceUrl } = $props();
</script>

<div class="dual-viewer">
    <div class="videos">
        {#if video1}
            <div class="video-container">
                <div class="video-title">
                    {video1}
                    <a
                        href={getResourceUrl(simName, video1)}
                        download
                        class="dl-link">[Download]</a
                    >
                </div>
                <video controls src={getResourceUrl(simName, video1)} muted>
                    <track kind="captions" />
                </video>
            </div>
        {/if}
        {#if video2}
            <div class="video-container">
                <div class="video-title">
                    {video2}
                    <a
                        href={getResourceUrl(simName, video2)}
                        download
                        class="dl-link">[Download]</a
                    >
                </div>
                <video controls src={getResourceUrl(simName, video2)} muted>
                    <track kind="captions" />
                </video>
            </div>
        {/if}
    </div>
</div>

<style>
    .dual-viewer {
        padding: 15px;
        background-color: #f9f9f9;
        margin-bottom: 20px;
        border: 1px solid #000;
    }
    .videos {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .video-container {
        flex: 1 1 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .video-title {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .dl-link {
        font-weight: normal;
        margin-left: 10px;
        color: #0000ff;
        text-decoration: underline;
        font-size: 14px;
    }
    .dl-link:visited {
        color: #800080;
    }
    video {
        max-width: 100%;
        border: 1px solid #000;
        background-color: #000;
    }
</style>
