{% extends "base.html" %}
{% load static %}
{% load app_extras %}

{% block title %}
  {{ tv.title }} S{{ season.season_number }} - Yamtrack
{% endblock title %}

{% block container %}
  {% include "app/components/media_description.html" with media=season tv=tv request=request source=media.source media_type="season" media_id=tv.media_id season_number=season.season_number title=tv.title|capfirst IMG_NONE=IMG_NONE only %}
 
  <div class="dropdown mb-3">
    <button class="btn btn-secondary dropdown-toggle"
            type="button"
            data-bs-toggle="dropdown"
            aria-expanded="false">{{ season.title }}</button>
    <ul class="dropdown-menu">
      {% for tv_season in tv.related.seasons %}
        <li>
          <a class="dropdown-item"
             href="{% url 'season_details' media_id=tv.media_id title=tv.title|slug season_number=tv_season.season_number %}">
            {{ tv_season.title }}
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>

  {% for episode in season.episodes %}
    <div class="card mb-3">
      <div class="row g-0">

        {% if episode.image == IMG_NONE %}
          <div class="col-md-3 episode-img-none"></div>
        {% else %}
          <div class="col-md-3">
            <img src="{{ episode.image }}"
                 class="w-100 h-100 object-fit-cover rounded-start"
                 alt="E{{ episode.episode_number }}">
          </div>
        {% endif %}
 
        <div class="col-md-9 card-body d-flex flex-column align-items-start pb-2">

          <h3 class="fs-5">
            S{{ season.season_number|stringformat:"02d" }}.E{{ episode.episode_number|stringformat:"02d" }} - {{ episode.title }}
          </h3>

          <div class="mb-2">
            <small class="text-body-secondary">{{ episode.air_date|default_if_none:"Unknown air date" }}</small>
          </div>
 
          <p class="description mb-2">{{ episode.overview }}</p>

          <div class="mt-auto d-flex flex-wrap gap-3">
            <div class="d-flex gap-2">
              <div>
                <button type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="modal"
                        data-bs-target="#episode_{{ episode.episode_number }}"
                        title="Add additional plays">
                  {% if episode.watched %}
                    <i class="bi bi-check-circle-fill"></i>
                  {% else %}
                    <i class="bi bi-check-circle"></i>
                  {% endif %}
                </button>

                <div class="modal fade"
                     id="episode_{{ episode.episode_number }}"
                     tabindex="-1"
                     aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered modal-sm">
                    <div class="modal-content">

                      <div class="modal-header">
                        <h5 class="modal-title">{{ tv.title|capfirst }} S{{ season.season_number }}.E{{ episode.episode_number }}</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"></button>
                      </div>

                      <div class="modal-body">
                        {% if not episode.watched %}
                          <div class="text-center fs-5">Watch date</div>
                        {% else %}
                          <div class="text-center fs-5">Rewatch Date</div>
                        {% endif %}
 
                        <form method="post"
                              action="{% url 'episode_handler' %}?next={{ request.path }}">
                          {% csrf_token %}
                          <input type="hidden" name="media_id" value="{{ tv.media_id }}">
                          <input type="hidden" name="season_number" value="{{ season.season_number }}">
                          <input type="hidden"
                                 name="episode_number"
                                 value="{{ episode.episode_number }}">
                          <button type="submit"
                                  class="btn btn-secondary w-100 mt-3"
                                  name="release"
                                  value="{{ episode.air_date }}">Release date</button>
                          <div class="d-flex date-btn-group mt-2">
                            <input type="date"
                                   class="form-control pe-2 border-end-0 rounded-end-0"
                                   name="date"
                                   value="{% if episode.watch_date %}{{ episode.watch_date|date:"Y-m-d" }}{% else %}{% now "Y-m-d" %}{% endif %}">
                            <button type="submit"
                                    class="btn btn-secondary border-start-0 rounded-start-0">
                              <i class="bi bi-check-circle-fill"></i>
                            </button>
                          </div>
                          <button type="submit"
                                  class="btn btn-danger w-100 mt-2"
                                  {% if not episode.watched %}disabled{% endif %}
                                  name="unwatch">Remove Last Watch</button>
                        </form>
                      </div>

                    </div>
                  </div>
                </div>
              </div>

              <div>
                {% include "app/components/open_modal.html" with modal_type="lists" request=request source=episode.source title=tv.title media_type="episode" image=episode.image media_id=tv.media_id season_number=season.season_number episode_number=episode.episode_number only %}
              </div>

              <div>
                {% include "app/components/open_modal.html" with modal_type="history" request=request source=episode.source title=tv.title media_type="episode" image=episode.image media_id=tv.media_id season_number=season.season_number episode_number=episode.episode_number only %}
              </div>
            </div>

            <div class="d-flex align-items-center">
              {% if episode.watch_date %}
                {% if episode.repeats > 0 %}
                  <small>{{ episode.repeats|add:"1" }} watches, last watched on {{ episode.watch_date|date:"Y-m-d" }}</small>
                {% else %}
                  <small>On {{ episode.watch_date|date:"Y-m-d" }}</small>
                {% endif %}
              {% endif %}
            </div>

          </div>
        </div>
      </div>
    </div>
  {% endfor %}
{% endblock container %}
