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

    let currentIndex = $state(0);

    function next() {
        if (images && images.length > 0) {
            currentIndex = (currentIndex + 1) % images.length;
        }
    }

    function prev() {
        if (images && images.length > 0) {
            currentIndex = (currentIndex - 1 + images.length) % images.length;
        }
    }
</script>

{#if images && images.length > 0}
    <div class="carousel-wrapper">
        <div class="carousel-container">
            <div class="carousel-title">
                Images ({currentIndex + 1} of {images.length})
            </div>
            <div class="carousel-content">
                <button class="nav-btn" onclick={prev}>&lt;</button>
                <div class="image-wrapper">
                    <img
                        src={getResourceUrl(simName, images[currentIndex])}
                        alt={images[currentIndex]}
                    />
                    <div class="caption">
                        {images[currentIndex]}
                        <a
                            href={getResourceUrl(simName, images[currentIndex])}
                            download
                            class="dl-link">[Download]</a
                        >
                    </div>
                </div>
                <button class="nav-btn" onclick={next}>&gt;</button>
            </div>
        </div>
    </div>
{/if}

<style>
    .carousel-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }
    .carousel-container {
        border: 1px solid #000;
        padding: 10px;
        background-color: #f9f9f9;
        display: inline-block;
        max-width: 100%;
    }
    .carousel-title {
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
        border-bottom: 1px solid #000;
        padding-bottom: 5px;
    }
    .carousel-content {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .nav-btn {
        background-color: #e0e0e0;
        border: 1px solid #000;
        padding: 10px 15px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        font-family: inherit;
    }
    .nav-btn:hover {
        background-color: #d0d0d0;
    }
    .image-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .image-wrapper img {
        max-width: 100%;
        max-height: 500px;
        border: 1px solid #000;
        object-fit: contain;
    }
    .caption {
        margin-top: 5px;
        font-size: 12px;
        color: #555;
    }
    .dl-link {
        margin-left: 10px;
        color: #0000ff;
        text-decoration: underline;
    }
    .dl-link:visited {
        color: #800080;
    }
</style>
