{% load app_tags %}

<div class="bg-[#2a2f35] p-6 rounded-lg max-h-[70svh] overflow-y-auto">
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold text-white">Activity History</h2>
    <button class="text-gray-400 hover:text-white cursor-pointer"
            @click="historyOpen = false">{% include "app/icons/x.svg" with classes="w-6 h-6" %}</button>
  </div>
  <ul class="space-y-4">
    {% for entry in timeline %}
      <li id="history-{{ entry.id }}"
          class="bg-[#39404b] p-4 pt-3 rounded-lg group relative space-y-1">
        <div class="flex justify-between items-center mb-2">
          {% if total_medias > 1 %}
            <span class="text-xs px-2 py-1 rounded bg-gray-600 text-gray-300">Instance #{{ entry.media_entry_number }}</span>
          {% endif %}
          <span class="text-sm text-gray-400">{{ entry.date|datetime_format:user }}</span>

          <button class="inline-flex items-center justify-center rounded-md h-8 w-8 text-gray-400 hover:text-red-400 hover:bg-red-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 cursor-pointer"
                  hx-delete="{% url 'delete_history_record' media_type entry.id %}"
                  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                  hx-target="#history-{{ entry.id }}"
                  hx-swap="outerHTML">{% include "app/icons/trashcan.svg" with classes="w-5 h-5" %}</button>
        </div>
        {% for change in entry.changes %}<p class="text-white">{{ change.description }}</p>{% endfor %}
      </li>
    {% empty %}
      <li class="bg-[#39404b] p-4 rounded-lg text-center text-gray-400">You haven't started tracking it yet.</li>
    {% endfor %}
  </ul>
</div>