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

{% block title %}
  Home - Yamtrack
{% endblock title %}

{% block container %}
  {% for media_type, media_list in list_by_type.items %}
    <div class="mb-4">
      <h1 class="fs-4 text-center mb-2">{{ media_type|capfirst }} in Progress</h1>
      <div class="grid">
        {% for media in media_list %}
          <div class="card mx-auto">
            <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 %}{% endif %}">
              <img data-src="{{ media.item.image }}"
                   class="card-img lazyload {% if media.item.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
                   alt="{{ media }}"
                   data-expand="1000" />
            </a>
            <div class="card-img-overlay">
              <div class="card-title">{{ media }}</div>
              <div class="card-text d-flex justify-content-center align-items-center"
                   id="{{ media_type }}_{{ media.item.media_id }}{% if media.item.season_number != None %}_{{ media.item.season_number }}{% endif %}">
                {% include "app/components/progress_changer.html" with media_type=media_type media=media csrf_token=csrf_token only %}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% empty %}
    <div class="no-content">
      <div>
        <h1 class="text-center fs-3">You don't have any media in progress.</h1>
        <p class="text-center">Time to explore new media to enjoy!</p>
      </div>
    </div>
  {% endfor %}
{% endblock container %}

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