{% load app_tags %}

{% for media in media_list %}
  <tr class="hover:bg-[#39404b] transition-colors cursor-pointer hover-tap"
      x-data="{ trackOpen: false }"
      {% if forloop.last and media_list.has_next %} hx-get="{% url 'medialist' media_type %}?page={{ media_list.next_page_number }}" hx-trigger="revealed threshold:200px" hx-swap="afterend" hx-include="#filter-form" hx-indicator="#loading-indicator" {% endif %}>
    <td class="p-2 relative">
      <img alt="{{ media.item }}"
           class="lazyload min-w-10 w-10 h-10 object-cover rounded-md parent-hover-tap:hidden"
           data-src="{{ media.item.image }}"
           src="{{ IMG_NONE }}">
      <button class="w-10 h-10 bg-indigo-600 hover:bg-indigo-500 text-white rounded-md transition-colors items-center justify-center hidden cursor-pointer parent-hover-tap:flex"
              hx-get="{% media_view_url 'track_modal' media.item %}"
              hx-vals='{"return_url": "{{ request.get_full_path|urlencode }}", "instance_id": "{{ media.id }}"}'
              hx-target="#{% component_id 'track' media.item media.id %}"
              hx-trigger="click once"
              @click="trackOpen = true">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
             class="w-4 h-4">
          <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
          <path d="M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z"></path>
        </svg>
      </button>

      {# Track Modal #}
      <div x-show="trackOpen"
           @keydown.escape.window="trackOpen = false"
           class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
        <div class="w-[38rem] max-h-[90vh] px-4 md:px-0 relative z-60"
             @click.outside="trackOpen = false">
          <div id="{% component_id 'track' media.item media.id %}"></div>
        </div>
      </div>
    </td>
    <td class="p-2 pe-8 font-medium">
      <div class=" flex justify-between items-center">
        <a href="{{ media.item|media_url }}"
           class="hover:text-indigo-400 transition-colors line-clamp-1">{{ media.item }}</a>

        {% if media.repeats > 1 %}
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-4 h-4 text-slate-200 mr-1">
              <path d="m17 2 4 4-4 4" />
              <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
              <path d="m7 22-4-4 4-4" />
              <path d="M21 13v1a4 4 0 0 1-4 4H3" />
            </svg>
            <span class="text-sm text-white">{{ media.repeats }}</span>
          </div>
        {% endif %}
      </div>
    </td>
    {% if media.score is not None %}
      <td class="p-2 text-center">
        <div class="flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
               class="w-4 h-4 text-yellow-400 mr-1 fill-current">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
          </svg>
          <span class="text-white -mt-[3px]">{{ media.formatted_score }}</span>
        </div>
      </td>
    {% else %}
      <td class="p-2 text-center">
        <div class="flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
               class="w-4 h-4 text-gray-400 mr-1 fill-current">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
          </svg>
        </div>
      </td>
    {% endif %}

    {# Progress field #}
    {% if media_type != MediaTypes.MOVIE.value %}
      <td class="p-2 text-center">
        {{ media.formatted_progress }}
        {% if media.max_progress %}/ {{ media.max_progress }}{% endif %}
      </td>
      {% if media_type == MediaTypes.TV.value %}<td class="p-2 text-center">{{ media.last_watched }}</td>{% endif %}
    {% endif %}

    <td class="p-2 text-center">{{ media.status|media_status_readable }}</td>

    {% if media.start_date %}
      <td class="p-2 text-center">{{ media.start_date|date:"SHORT_DATE_FORMAT" }}</td>
    {% else %}
      <td class="p-2 text-center">
        <span class="text-gray-500">-</span>
      </td>
    {% endif %}

    {% if media.end_date %}
      <td class="p-2 text-center">{{ media.end_date|date:"SHORT_DATE_FORMAT" }}</td>
    {% else %}
      <td class="p-2 text-center">
        <span class="text-gray-500">-</span>
      </td>
    {% endif %}
  </tr>
{% endfor %}
