---
const videoResp = await fetch('https://management.beanstalkedu.com/items/theme_videos?filter[theme_key][_in]=3');
const videoRespJson = await videoResp.json();
const videoRespData = videoRespJson.data.reverse();
---

<main>
    <div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
        {videoRespData.map((data: { video_thumb: string | undefined; videos_title: string | undefined; youtube_id: string | undefined; title: string | undefined; }) =>
            <div class="p-4">
                    <div id="data.youtube_id" class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
                        <div class="flex rotate-6 relative"><img src={'https://management.beanstalkedu.com/assets/'+data.video_thumb} alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
                        <img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
                        </div>
                    </div>
                    <div class="mt-6 text-center text-xl text-color-2">{data.videos_title}</div>
            </div>
            <div id="myModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <div style="width: 100%;">
                        <iframe width="380" height="320" 
                            src={'https://www.youtube.com/embed/'+data.youtube_id}>
                        </iframe>
                    </div>
                </div>
            </div>
                    
        )}
        
    </div>
<!-- Trigger/Open The Modal -->
<!-- <button id="myBtn">Open Modal</button> -->

<!-- The Modal -->

</main>
<script is:inline>
    // Get the modal
    var modal = document.getElementById("myModal");
    
    // Get the button that opens the modal
    var btn = document.getElementById("data.youtube_id");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks the button, open the modal 
    btn.onclick = function() {
      modal.style.display = "block";
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
    </script>
    <style>
        body {font-family: Arial, Helvetica, sans-serif;}
        
        /* The Modal (background) */
        .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        
        /* Modal Content */
        .modal-content {
          background-color: #fefefe;
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
        }
        
        /* The Close Button */
        .close {
          color: #aaaaaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
        }
        
        .close:hover,
        .close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
        }
        </style>