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

{% block title %}
  {% if media_type == "tv" %}
    TV shows - Yamtrack
  {% else %}
    {{ media_type|title }}s - Yamtrack
  {% endif %}
{% endblock title %}

{% block container %}
  {% if media_list %}
    <div class="mb-3">
      <button type="button"
              class="btn btn-secondary"
              data-bs-toggle="modal"
              data-bs-target="#filter-modal">
        <i class="bi bi-funnel-fill"></i>
      </button>
      <div class="modal fade" id="filter-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-body">
              <form method="get">
                {{ filter_form|crispy }}
                <div class="text-center">
                  <button class="btn btn-secondary" type="submit">Filter</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="grid">
      {% for media in media_list %}
        <div class="card">
          <a href="{% if media.item.season_number != None %}{% url 'season_details' media_id=media.item.media_id title=media.item.title|slug season_number=media.item.season_number %}{% else %}{% url 'media_details' media_type=media_type media_id=media.item.media_id title=media.item.title|slug %}?source={{ media.item.source }}{% endif %}">
            <img class="card-img lazyload {% if media.item.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
                 data-src="{{ media.item.image }}"
                 data-expand="1000"
                 alt="{{ media }}" />
          </a>
          <div class="card-img-overlay">
            <div class="card-title">{{ media }}</div>
            <div class="card-text d-flex justify-content-evenly align-items-center">
              <span>{{ media.score }}</span>
              {% if media.item.season_number != None %}
                {% include "app/components/open_modal.html" with modal_type="track" request=request media_type="season" source=media.item.source image=media.item.image media_id=media.item.media_id season_number=media.item.season_number title=media.item.title only %}
              {% else %}
                {% include "app/components/open_modal.html" with modal_type="track" request=request media_type=media_type source=media.item.source image=media.item.image media_id=media.item.media_id title=media.item.title only %}
              {% endif %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="no-content">
      <div>
        <h1 class="text-center fs-3">
          {% if media_type == "tv" %}
            Your tv show tracker is empty.
          {% else %}
            Your {{ media_type }} tracker is empty.
          {% endif %}
        </h1>
        <p class="text-center">
          {% if media_type == "tv" %}
            Why not start by adding your favorite tv shows?
          {% else %}
            Why not start by adding your favorite {{ media_type }}s?
          {% endif %}
        </p>
      </div>
    </div>
  {% endif %}
{% endblock container %}

{% block js %}
  <script src="{% static "js/lazysizes.min.js" %}" async=""></script>
{% endblock js %}
