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

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

{% block container %}
  {% if not query_list %}
    <div class="no-content">
      <div>
        <h1 class="text-center fs-3">No results found!</h1>
        <p class="text-center">Try searching for something else.</p>
      </div>
    </div>
  {% else %}
    {% if query_list.0.media_type == "manga" %}
      <div class="btn-toolbar justify-content-center mb-4 sources">
        <div class="btn-group"
             role="group"
             aria-label="Basic radio toggle button group">
          <a href="{% url 'search' %}?q={{ request.GET.q }}&media_type=manga"
             class="btn btn-outline-secondary {% if request.GET.source != "mangaupdates" %}active{% endif %}">MyAnimeList</a>
 
          <a href="{% url 'search' %}?q={{ request.GET.q }}&media_type=manga&source=mangaupdates"
             class="btn btn-outline-secondary {% if request.GET.source == "mangaupdates" %}active{% endif %}">MangaUpdates</a>
        </div>
      </div>
    {% endif %}
    <div class="grid">
      {% for media in query_list %}
        <div class="card">
          <a href="{% url 'media_details' media_type=media.media_type media_id=media.media_id title=media.title|slug %}?source={{ media.source }}">
            <img src="{{ media.image }}"
                 class="card-img {% if media.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
                 alt="{{ media.title }}" />
          </a>

          <div class="card-img-overlay">
            <div class="card-title">{{ media.title }}</div>
            <div class="card-text d-flex justify-content-evenly align-items-center">
              {% include "app/components/open_modal.html" with modal_type="track" request=request source=media.source media_type=media.media_type image=media.image media_id=media.media_id title=media.title only %}
            </div>
          </div>

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

{% block js %}
  <script src="{% static 'js/manga-source.js' %}" data-source="{{ request.GET.source }}"></script>
{% endblock js %}
