{% load app_tags %}

{% for media in media_list.items %}
  {% component_id 'track' media.item media.id as track_component_id %}
  {% component_id 'lists' media.item as lists_component_id %}
  {% component_id 'history' media.item as history_component_id %}
  <div id="home-media-{{ media.item.media_type }}-{{ media.id }}"
       class="bg-[#2a2f35] rounded-lg overflow-hidden shadow-lg transition-all duration-300"
       x-data="{ trackOpen: false, listsOpen: false, historyOpen: false }">
    <div class="relative">
      <a href="{{ media.item|media_url }}">
        <img alt="{{ media }}"
             class="lazyload w-full aspect-2/3 {% if media.item.image != IMG_NONE %}object-cover{% endif %}"
             data-src="{{ media.item.image }}"
             src="{{ IMG_NONE }}">
      </a>

      {% if media.next_event and not media.next_event.is_max_datetime %}
        <div class="absolute top-2 left-1/2 flex max-w-[98%] -translate-x-1/2 items-center gap-1.5 rounded-md bg-black/80 px-2 py-1.5 shadow-md whitespace-nowrap">
          {% if home_status == Status.PLANNING.value %}
            {% include "app/icons/clock.svg" with classes="w-3.5 h-3.5 text-sky-400" %}
          {% else %}
            {% include "app/icons/clock.svg" with classes="w-3.5 h-3.5 text-indigo-400" %}
          {% endif %}
          <span class="text-xs font-medium text-white drop-shadow-sm truncate">
            {% if media.next_event.content_number %}
              {{ media.item.media_type|short_unit }}{{ media.next_event.content_number }} •
            {% endif %}
            {{ media.next_event.datetime|natural_day:user }}
          </span>
        </div>
      {% endif %}

      <div class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 hover-tap:opacity-100{% if user.clickable_media_cards %} pointer-coarse:hidden{% endif %}">
        <a href="{{ media.item|media_url }}" class="absolute inset-0 z-0"></a>

        <div class="relative z-10 flex items-center justify-center space-x-2.5">
          <button class="cursor-pointer rounded-full bg-indigo-600 p-2.5 text-white transition-all duration-200 hover:scale-110 hover:bg-indigo-500 hover:shadow-[0_0_15px_rgba(99,102,241,0.5)]"
                  title="Add to tracker"
                  hx-get="{% media_view_url 'track_modal' media.item %}"
                  hx-vals='{"return_url": "{{ request.get_full_path|urlencode }}", "instance_id": "{{ media.id }}"}'
                  hx-target="#{{ track_component_id }}"
                  hx-trigger="click once"
                  @click="trackOpen = true">{% include "app/icons/edit.svg" with classes="w-4 h-4" %}</button>

          <button class="cursor-pointer rounded-full bg-emerald-600 p-2.5 text-white transition-all duration-200 hover:scale-110 hover:bg-emerald-500 hover:shadow-[0_0_15px_rgba(16,185,129,0.5)]"
                  title="Add to custom lists"
                  hx-get="{% media_view_url 'lists_modal' media.item %}"
                  hx-vals='{"return_url": "{{ request.get_full_path|urlencode }}"}'
                  hx-target="#{{ lists_component_id }}"
                  hx-trigger="click once"
                  @click="listsOpen = true">{% include "app/icons/list-add.svg" with classes="w-4 h-4" %}</button>

          <button class="cursor-pointer rounded-full bg-amber-600 p-2.5 text-white transition-all duration-200 hover:scale-110 hover:bg-amber-500 hover:shadow-[0_0_15px_rgba(245,158,11,0.5)]"
                  title="View your activity history"
                  hx-get="{% media_view_url 'history_modal' media.item %}"
                  hx-vals='{"return_url": "{{ request.get_full_path|urlencode }}"}'
                  hx-target="#{{ history_component_id }}"
                  hx-trigger="click once"
                  @click="historyOpen = true">{% include "app/icons/history.svg" with classes="w-4 h-4" %}</button>
        </div>
      </div>
    </div>

    <div class="p-3">
      <a href="{{ media.item|media_url }}"
         class="line-clamp-1 text-center text-sm font-semibold text-white transition duration-300 {% if home_status == Status.PLANNING.value %}hover:text-sky-400{% else %}hover:text-indigo-400{% endif %}"
         title="{{ media }}">{{ media }}</a>
    </div>

    {% if home_status == Status.PLANNING.value %}
      {% if user.progress_bar %}<div class="h-1.25 {{ Status.PLANNING.value|status_background_color }}"></div>{% endif %}
    {% else %}
      <div id="progress-{{ media.item.media_type }}-{{ media.id }}">
        {% include "app/components/progress_changer.html" with media=media user=user csrf_token=csrf_token MediaTypes=MediaTypes home_status=home_status only %}
      </div>
    {% endif %}

    <div x-show="trackOpen"
         @keydown.escape.window="trackOpen = false"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div class="relative z-60 max-h-[90vh] w-152 px-4 md:px-0"
           @click.outside="trackOpen = false">
        <div id="{{ track_component_id }}"></div>
      </div>
    </div>

    <div x-show="listsOpen"
         @keydown.escape.window="listsOpen = false"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div class="relative z-60 max-h-[90vh] w-96 px-4 md:px-0"
           @click.outside="listsOpen = false">
        <div id="{{ lists_component_id }}"></div>
      </div>
    </div>

    <div x-show="historyOpen"
         @keydown.escape.window="historyOpen = false"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div class="relative z-60 max-h-[90vh] w-96 px-4 md:px-0"
           @click.outside="historyOpen = false">
        <div id="{{ history_component_id }}"></div>
      </div>
    </div>
  </div>
{% endfor %}