{% load app_tags %}

<h4 class="text-sm font-medium text-gray-300 mb-2">Currently Excluded:</h4>
<div class="space-y-2">
  {% if excluded_items %}
    {% for item in excluded_items %}
      <div class="flex items-center justify-between p-2 bg-[#39404b] rounded-md">
        <div class="flex items-center">
          <img alt="{{ item }}"
               class="w-8 h-10 object-cover rounded mr-2"
               src="{{ item.image }}">

          <div class="flex flex-col justify-center">
            <span class="text-sm text-gray-300">{{ item }}</span>
            <p class="text-xs text-gray-400">{{ item.media_type|media_type_readable }}</p>
          </div>
        </div>
        <button type="button"
                class="me-2 text-xs text-red-400 hover:text-red-300 cursor-pointer"
                hx-post="{% url 'include_notification_item' %}"
                hx-target="#excluded-items-container"
                hx-swap="innerHTML"
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                hx-vals='{"item_id": "{{ item.id }}"}'>{% include "app/icons/x.svg" with classes="w-4 h-4" %}</button>
      </div>
    {% endfor %}
  {% else %}
    <div class="space-y-2">
      <p class="text-xs text-gray-400 text-center py-2 bg-[#39404b] rounded-md">No media items excluded yet</p>
    </div>
  {% endif %}
</div>