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

 <div id="south">
    <h2 class="text-light m-2">South Indian</h2>
<ul class="list-group list-group-horizontal">

<% if (data.length > 0){ %>
  <% data.forEach( data => { %>
  <li>
            <div class="card m-2 bg-black border-light" style="width: 15rem; ">
              <img src="<%= data.img %>" class="card-img-top" >
              <div class="card-img-bottom  m-1 top-50">
            <h6 class="card-title text-white "><%= data.name %></h6>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal<%= data.id %>">
    Play
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal<%= data.id %>" 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="40%"
          src="<%= data.url %>" frameborder="0"
          allowfullscreen></iframe>
        <br><br>
        <p><%= data.info %></p>
        </div>
      </div>
    </div>
  </div>
 </div>   
</div>
</li>
<% if (data.id % 1 == 0){ %>
</ul>
<% } %>
<% }) } %>

</div>
</div>

 <br>
 <%- include('./partials/footer.ejs') %>
</body>
</html>