{{template "partials/header" .}}

<div class="flex w-full flex-col items-center">
  <h1 class="mb-6 text-3xl font-bold">{{ .TvShow.Title }}</h1>

  <div class="mb-6 rounded-lg bg-white p-6 shadow-md">
    <div class="mb-4 text-center">
      <span class="text-gray-600">IMDb ID:</span>
      <span class="font-semibold text-gray-800">{{ .TvShow.ShowID }}</span>
    </div>

    <div class="grid grid-cols-2 gap-8">
      <ul class="space-y-2">
        <li>
          <span class="text-gray-600">Title:</span>
          <span class="font-semibold text-gray-800">{{ .TvShow.Title }}</span>
        </li>
        <li>
          <span class="text-gray-600">Runtime:</span>
          <span class="font-semibold text-gray-800"
            >{{ .TvShow.Runtime }} min</span
          >
        </li>
        <li>
          <span class="text-gray-600">Seasons:</span>
          <span class="font-semibold text-gray-800">{{len .TvShow.Seasons }}</span>
        </li>
      </ul>

      <ul class="space-y-2">
        <li>
          <span class="text-gray-600">Total votes:</span>
          <span class="font-semibold text-gray-800">{{ .TvShow.Votes }}</span>
        </li>
        <li>
          <span class="text-gray-600">Average rating:</span>
          <span class="font-semibold text-gray-800"
            >{{printf "%.2f" .TvShow.AvgRating }}</span
          >
        </li>
        <li>
          <span class="text-gray-600">Median rating:</span>
          <span class="font-semibold text-gray-800"
            >{{printf "%.2f" .TvShow.MedianRating }}</span
          >
        </li>
      </ul>
    </div>
  </div>

  <div class="mb-6 w-2/3">
    <h2 class="mb-6 text-center text-2xl font-bold">Seasons overall</h2>
    <canvas id="seasons"></canvas>
  </div>

  <div class="mb-6 w-2/3">
    <div x-data="{ selectedSeasonNumber: 1}">
      <h2 class="mb-6 text-center text-2xl font-bold">
        Season <span x-text="selectedSeasonNumber"></span>
      </h2>
      <canvas id="episodes"></canvas>
      <div class="mt-4 flex items-center justify-center space-x-2">
        {{ range .TvShow.Seasons }}
        <button
          class="rounded-md border-2 border-black px-4 py-2 font-semibold text-black hover:bg-black hover:text-white"
          :class="selectedSeasonNumber === {{ .Number }} ? 'bg-black text-white' : 'text-black'"
          x-on:click="selectedSeasonNumber = {{ .Number }}; loadSeason({{ .Number }})"
        >
          S{{ .Number }}
        </button>
        {{ end }}
      </div>
    </div>
  </div>
</div>

{{template "partials/footer" .}}
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"
  integrity="sha512-vCUbejtS+HcWYtDHRF2T5B0BKwVG/CLeuew5uT2AiX4SJ2Wff52+kfgONvtdATqkqQMC9Ye5K+Td0OTaz+P7cw=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script type="module">
  import { initCharts, loadSpecificSeason } from "/js/components/charts.js";

  let tvShow = "{{ .TvShowJSON }}";
  let tvShowParsed = JSON.parse(tvShow);

  function loadSeason(season) {
    const currentScrollY = window.scrollY;
    loadSpecificSeason(tvShowParsed, season);
    window.scrollTo(0, currentScrollY);
  }

  window.loadSeason = loadSeason;

  document.addEventListener("DOMContentLoaded", function () {
    initCharts(tvShowParsed);
  });
</script>