<!DOCTYPE html>
<html>
    <head>

        {% set page_title = 'Plate Visualization' %}
        <title>{{ page_title }}</title>

        {% set bloom_mod = 'lims' %}

        <link rel="stylesheet" type="text/css" href="{{ style.skin_css }}"  >
        <link rel="stylesheet" type="text/css" href="/static/legacy/style.css">
        <style>
        /* Existing styles... */
        .carousel-container {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: auto;
        }
        .carousel-slide {
            display: none; /* Hide all slides initially */
        }
        .carousel-slide.active {
            display: block; /* Show the active slide */
        }
        .carousel-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .carousel-control {
            cursor: pointer;
            padding: 10px;
            background-color: #ddd;
            border: none;
            border-radius: 5px;
        }
        /* Additional styling as needed */
        </style>
        <script>
        // Add a script to calculate and set the plate dimensions
        document.addEventListener('DOMContentLoaded', (event) => {
            // Carousel functionality
            var currentSlide = 0;
            var slides = document.querySelectorAll('.carousel-slide');
            showSlide(currentSlide);

            function navigateSlide(change) {
                currentSlide += change;
                if (currentSlide >= slides.length) currentSlide = 0;
                if (currentSlide < 0) currentSlide = slides.length - 1;
                showSlide(currentSlide);
            }

            function showSlide(n) {
                slides.forEach(slide => slide.style.display = 'none');
                slides[n].style.display = 'block';
            }

            window.navigateSlide = navigateSlide; // Expose to global scope for HTML button access
        });
        // Remaining functions...
        </script>
    </head>
    <body>
        {% include 'legacy/bloom_header.html' %}

        <div id="myTooltipx" class="xtooltip"></div>
        <br>
        <div class="carousel-container">
            {% for plate in related_plates %}
                <div class="carousel-slide" id="plate-{{ plate.euid }}">
                    <!-- Plate content -->
                    <!-- Add your existing plate visualization logic here -->
                    <!-- Ensure each .well and other elements are scoped to this specific plate -->
                    {}
                </div>
            {% endfor %}
            <div class="carousel-controls">
                <button class="carousel-control" onclick="navigateSlide(-1)">Previous</button>
                <button class="carousel-control" onclick="navigateSlide(1)">Next</button>
            </div>
        </div>
        <!-- Remaining HTML and scripts -->
    </body>
</html>
