<!DOCTYPE html>
<html lang="en">
  <%- include('./partials/head.ejs') %>
<body class="bg-black">
    <div id="intro">
    <%- include('./partials/nav.ejs') %>

      <img src="./images/stranger-things.jpg" class="w-100">
        <div align="center">

<!-- Button trigger modal -->
<button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Play
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe width="100%" height="250px"
        src="https://www.youtube.com/embed/sBEvEcpnG7k"frameborder="0"
        allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

        <button class="btn btn-dark m-2 ">More Info</button>
        <p class="text-light">When a young boy disappears, his mother, a police chief and his friends must confront terrifying supernatural forces in order to get him back.</p>
        </div>
      </div>
      </div>
      <br><br>
  <div id="originals">
  <h2 class="text-light m-2">Netflix Originals</h2>
      <ul class="list-group list-group-horizontal">
        <li>
          <div class="card m-2 bg-black border-light" style="width: 10rem; ">
            <img src="./images/stranger-things.jpg" class="card-img-top" >
            <div class="card-img-bottom  m-1 top-50">
          <h6 class="card-title text-white ">Stranger Things: S04</h6>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Play
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe width="100%" height="250px"
        src="https://www.youtube.com/embed/sBEvEcpnG7k"frameborder="0"
        allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>   
   </div>
        </li>
        <li>
          
          <div class="card m-2 bg-black border-light" style="width: 10rem; ">
            <img src="./images/blackmirror.jpg" class="card-img-top" >
            <div class="card-img-bottom m-1 top-50">
          <h6 class="card-title text-white">Black Mirror: S06</h6>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal2">
  Play
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe width="100%" height="250px"
        src="https://www.youtube.com/embed/5jY1ecibLYo"frameborder="0"
        allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>   
   </div>

        </li>
      </ul>
      </div>
      <br>
      <div id="trending">
        <h2 class="text-light m-2 ">Trending Now</h2>
        <ul class="list-group list-group-horizontal">
          <li>
            
            <div class="card m-2 bg-black border-light" style="width: 10rem; ">
              <img src="./images/across_the_spider-verse.jpg" class="card-img-top" >
              <div class="card-img-bottom  m-1 top-50">
            <h6 class="card-title text-white ">Spiderman: Across the Spiderverse</h6>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal3">
    Play
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <iframe width="100%" height="250px"
          src="https://www.youtube.com/embed/cqGjhVJWtEg"frameborder="0"
          allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>   
     </div>

   </li>
    <li>
            <div class="card m-2 bg-black border-light" style="width: 10rem; ">
              <img src="./images/The_Flash.jpg" class="card-img-top" >
              <div class="card-img-bottom  m-1 top-50">
            <h6 class="card-title text-white ">The Flash</h6>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal4">
    Play
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal4" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <iframe width="100%" height="250px"
          src="https://www.youtube.com/embed/9vwaD9cHLNw"frameborder="0"
          allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>   
     </div>
  
          </li>
        </ul>
        </div>

      
        <div id="south">
          <h2 class="text-light m-2"><a class="link-light link-underline-opacity-0" href="./south-indian">South Indian <img class="bg-light rounded-circle" src="./images/arrow-right-square-fill.svg" width="30px" height="30px"></a>
          </h2>   
              <ul class="list-group list-group-horizontal">
                <li>
                  <div class="card m-2 bg-black border-light" style="width: 10rem; ">
                    <img src="./images/a-aa.jpg" class="card-img-top" >
                    <div class="card-img-bottom  m-1 top-50">
                  <h6 class="card-title text-white ">A Aa</h6>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal5">
          Play
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModal5" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <iframe width="100%" height="250px"
                src="https://www.youtube.com/embed/R7aCOI4DuA0"frameborder="0"
                allowfullscreen></iframe>
              </div>
            </div>
          </div>
        </div>   
           </div>
                </li>
                <li>
                  
                  <div class="card m-2 bg-black border-light" style="width: 10rem; ">
                    <img src="./images/a-aa2.jpg" class="card-img-top" >
                    <div class="card-img-bottom m-1 top-50">
                  <h6 class="card-title text-white">A Aa 2</h6>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal6">
          Play
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModal6" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <iframe width="100%" height="250px"
                src="https://www.youtube.com/embed/JDzXR_mV_fI"frameborder="0"
                allowfullscreen></iframe>
              </div>
            </div>
          </div>
        </div>   
           </div>
        </li>
      </ul>
        
              </div>
              <br>
<%- include('./partials/footer.ejs') %>
<script>
  if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js', { scope: '/' });
  }
</script>
</body>
</html>