@section Style {
    <link rel="stylesheet" href="~/css/Video.css" asp-append-version="true" />
}

<div class="container my-5">

    <h3 class="text-center fw-bold mb-4">Galeri Video</h3>

    <div class="row g-4" id="video-list"></div>

</div>

<div id="videoModal" class="video-modal">
    <div class="video-content">
        <span class="close-btn" onclick="closeVideo()">×</span>
        <iframe id="videoFrame" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

<script>
    function loadVideo() {

        fetch('/Video/GetAll')
            .then(res => res.json())
            .then(data => {

                let html = "";

                data.forEach(item => {
                    html += `
                        <div class="col-md-4">
                            <div class="youtube-wrapper">
                                <iframe 
                                    src="https://www.youtube.com/embed/${item.youtube}"
                                    title="${item.judul}"
                                    frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen>
                                </iframe>
                            </div>
                        </div>
                    `;
                });

                document.getElementById("video-list").innerHTML = html;

            });
    }

    function openVideo(url) {
        document.getElementById("videoFrame").src = url;
        document.getElementById("videoModal").style.display = "flex";
    }

    function closeVideo() {
        document.getElementById("videoFrame").src = "";
        document.getElementById("videoModal").style.display = "none";
    }

    document.addEventListener("DOMContentLoaded", loadVideo);
</script>