media_table_items.html

{% load app_tags %}

{% for media in media_list %}
  <tr class="hover:bg-[#39404b] transition-colors cursor-pointer hover-tap"
      data-bulk-id="{{ media.item.id }}"
      x-data="{ trackOpen: false }"
      :class="$store.bulk.active && $store.bulk.ids.includes({{ media.item.id }}) ? 'bg-indigo-900/30' : ''"
      {% 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 x-show="$store.bulk.active" class="p-2">
      <input type="checkbox"
             :checked="$store.bulk.ids.includes({{ media.item.id }})"
             @click.stop
             @change="$store.bulk.toggle({{ media.item.id }})"
             class="w-4 h-4 rounded accent-indigo-600 cursor-pointer">
    </td>
    <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">{% include "app/icons/edit.svg" with classes="w-4 h-4" %}</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-152 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">
            {% include "app/icons/repeat.svg" with classes="w-4 h-4 text-slate-200 mr-1" %}
            <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">
          {% include "app/icons/star.svg" with classes="w-4 h-4 text-yellow-400 mr-1 fill-current" %}
          <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">
          {% include "app/icons/star.svg" with classes="w-4 h-4 text-gray-400 mr-1 fill-current" %}
        </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_format:user }}</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_format:user }}</td>
    {% else %}
      <td class="p-2 text-center">
        <span class="text-gray-500">-</span>
      </td>
    {% endif %}
  </tr>
{% endfor %}