{% load app_tags %}

<div class="bg-[#2a2f35] rounded-lg overflow-hidden shadow-lg relative"
     x-data="{ trackOpen: false, listsOpen: false, historyOpen: false }">
  <div class="relative">
    <img alt="{{ title }}"
         class="lazyload w-full {% if from_grid %}aspect-[2/3]{% else %}h-48{% endif %} bg-[#3e454d] {% if item.image != IMG_NONE %}object-cover{% endif %}"
         data-src="{{ item.image }}"
         src="{{ IMG_NONE }}">

    <div class="absolute top-2 left-2 bg-gray-900/90 text-white text-xs px-2 py-1 rounded-md flex items-center shadow-md">
      <div class="flex items-center">
        {% if media.status == Status.COMPLETED.value %}
          <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 {{ MediaTypes.TV.value|media_color }} {% if media.end_date %}mr-1.5{% endif %}">
            <path d="M21.801 10A10 10 0 1 1 17 3.335" />
            <path d="m9 11 3 3L22 4" />
          </svg>

          {% if media.end_date is not None %}
            <span class="text-sm text-white">{{ media.end_date|date:"SHORT_DATE_FORMAT" }}</span>
          {% endif %}

        {% elif media.status == Status.IN_PROGRESS.value %}
          <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 {{ MediaTypes.EPISODE.value|media_color }} {% if media.start_date %}mr-1{% endif %}">
            <polygon points="6 3 20 12 6 21 6 3" />
          </svg>

          {% if media.start_date is not None %}
            <span class="text-sm text-white">{{ media.start_date|date:"SHORT_DATE_FORMAT" }}</span>
          {% endif %}

        {% elif media.status == Status.PAUSED.value %}
          <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 {{ MediaTypes.MOVIE.value|media_color }}">
            <rect x="14" y="4" width="4" height="16" rx="1" /><rect x="6" y="4" width="4" height="16" rx="1" />
          </svg>

        {% elif media.status == Status.PLANNING.value %}
          <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 {{ MediaTypes.ANIME.value|media_color }}">
            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
            <line x1="12" x2="12" y1="7" y2="13" /><line x1="15" x2="9" y1="10" y2="10" />
          </svg>

        {% elif media.status == Status.DROPPED.value %}
          <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 {{ MediaTypes.MANGA.value|media_color }}">
            <path d="m15 9-6 6" />
            <path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z" />
            <path d="m9 9 6 6" />
          </svg>
        {% endif %}
      </div>
    </div>

    {% if media.score is not None %}
      <div class="absolute sm:top-2 sm:right-2 sm:left-auto top-10 left-2 bg-gray-900/90 text-white text-xs px-2 py-1 rounded-md flex items-center shadow-md">
        <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-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-sm text-white">{{ media.formatted_score }}</span>
        </div>
      </div>
    {% endif %}

    <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 hover-tap:opacity-100">
      <a href="{{ item|media_url }}" class="absolute inset-0"></a>

      <div class="relative flex items-center justify-center space-x-2.5">
        {% if item.media_type == MediaTypes.EPISODE.value %}
          <button @click="trackOpen = true"
                  class="p-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full transition duration-300 cursor-pointer">
            {% if media %}
              <svg xmlns="http://www.w3.org/2000/svg"
                   width="16"
                   height="16"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
                   stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round">
                <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            {% else %}
              <svg xmlns="http://www.w3.org/2000/svg"
                   width="16"
                   height="16"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
                   stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round">
                <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"></path>
                <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"></path>
                <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"></path>
                <path d="m2 2 20 20"></path>
              </svg>
            {% endif %}
          </button>
        {% else %}
          {# Track Button #}
          <button class="p-2.5 bg-indigo-600 text-white rounded-full hover:bg-indigo-500 hover:scale-110 hover:shadow-[0_0_15px_rgba(99,102,241,0.5)] transition-all duration-200 cursor-pointer"
                  hx-get="{% media_view_url 'track_modal' item %}"
                  hx-vals='{"return_url": "{{ request.get_full_path|urlencode }}", "instance_id": "{{ media.id }}"}'
                  hx-target="#{% component_id 'track' item media.id %}"
                  hx-trigger="click once"
                  @click="trackOpen = true">
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="16"
                 height="16"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round">
              <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>
        {% endif %}

        {# Lists Button #}
        <button class="p-2.5 bg-emerald-600 text-white rounded-full hover:bg-emerald-500 hover:scale-110 hover:shadow-[0_0_15px_rgba(16,185,129,0.5)] transition-all duration-200 cursor-pointer"
                hx-get="{% media_view_url 'lists_modal' item %}"
                hx-vals='{"return_url": "{{ request.get_full_path|urlencode }}"}'
                hx-target="#{% component_id 'lists' item %}"
                hx-trigger="click once"
                @click="listsOpen = true">
          <svg xmlns="http://www.w3.org/2000/svg"
               width="16"
               height="16"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round">
            <path d="M11 12H3"></path>
            <path d="M16 6H3"></path>
            <path d="M16 18H3"></path>
            <path d="M18 9v6"></path>
            <path d="M21 12h-6"></path>
          </svg>
        </button>

        {# History Button #}
        <button class="p-2.5 bg-amber-600 text-white rounded-full hover:bg-amber-500 hover:scale-110 hover:shadow-[0_0_15px_rgba(245,158,11,0.5)] transition-all duration-200 cursor-pointer"
                hx-get="{% media_view_url 'history_modal' item %}"
                hx-vals='{"return_url": "{{ request.get_full_path|urlencode }}"}'
                hx-target="#{% component_id 'history' item %}"
                hx-trigger="click once"
                @click="historyOpen = true">
          <svg xmlns="http://www.w3.org/2000/svg"
               width="16"
               height="16"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round">
            <path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"></path>
            <path d="M16 2v4"></path>
            <path d="M8 2v4"></path>
            <path d="M3 10h5"></path>
            <path d="M17.5 17.5 16 16.3V14"></path>
            <circle cx="16" cy="16" r="6"></circle>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="p-3">
    <a href="{{ item|media_url }}"
       class="text-sm font-semibold text-white hover:text-indigo-400 transition duration-300 line-clamp-1"
       title="{{ title }}">{{ title }}</a>
  </div>

  {% if item.media_type == MediaTypes.EPISODE.value %}
    {% include "app/components/fill_track_episode.html" with request=request media=item episode=item episode_title=title csrf_token=csrf_token TRACK_TIME=TRACK_TIME only %}
  {% else %}
    {# 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' item media.id %}"></div>
      </div>
    </div>
  {% endif %}

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

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