@model List<Episode>

@{
    ViewData["Title"] = "Home Page";
    Layout = "";
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="~/css/styles.css">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Podcast Page</title>
  <style>
   
  </style>
</head>
<body>
  <div class="header">
    <h1></h1>
  </div>
  <div class="container">
<div class="podcast-header">
  <img src="podcast-cover.jpg" alt="Podcast Icon" class="podcast-icon">
  <div class="podcast-info">
    <h1 class="podcast-title">Pardazeh</h1>
    <p class="podcast-author">SBU Computer Science Scientific Association</p>
  </div>
</div>
    <div class="episodes">
      <h2>Episodes</h2>
            @foreach(Episode episode in Model)
            {
                <div class="episode">
                    <img src="@episode.Image" alt="Episode Cover">
                    <div class="episode-details">
	                    <h3>#@episode.Id.ToString("D4") - @episode.Title</h3>
	                    <div class="meta">
                            <span><i class="fas fa-video"></i> Video • Pardazeh Podcast</span>
                            <span><i class="fas fa-calendar-alt"></i> @episode.ReleaseDateTime.ToString("MMM dd")</span>
                            <span><i class="fas fa-clock"></i>@episode.Duration</span>
                        </div>
	                    <br/>
                        <p>@episode.Description</p>
                    </div>
                    <div class="episode-icons">
                        <div class="play-episode"><i class="fas fa-play"></i></div>
                    </div>
                </div>
            }  
        </div>
    </div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const episodes = document.querySelectorAll(".episode");
  const observer = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
          entry.target.style.animationDelay = `${index * 0.2}s`; 
          entry.target.style.opacity = 1; 
          observer.unobserve(entry.target); 
        }
      });
    },
    {
      threshold: 0.1, 
    }
  );

  episodes.forEach(episode => {
    observer.observe(episode);
  });
});

</script>
</body>
</html>
