{% load i18n %}
{% if alerts %}
<div class="mb-6">
  <h2 class="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1">
    <span class="w-2 h-2 rounded-full bg-red-500 inline-block"></span>
    {% trans "Active Price Drop Alerts" %}
  </h2>
  <div class="space-y-2">
    {% for alert in alerts %}
    <div class="flex items-center justify-between bg-red-50 border border-red-100 rounded-lg px-4 py-3"
         id="alert-{{ alert.pk }}">
      <div class="flex items-center gap-3">
        <span class="text-red-500 text-lg">💰</span>
        <div>
          <span class="font-medium text-gray-900">{{ alert.watcher.name }}</span>
          <span class="text-sm text-gray-500 ml-2">
            ${{ alert.old_price }} → <strong class="text-red-600">${{ alert.new_price }}</strong>
            <span class="text-green-700 font-medium">({{ alert.drop_pct|floatformat:1 }}% off)</span>
          </span>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <a href="{{ alert.watcher.url }}" target="_blank" rel="noopener"
           class="text-xs text-indigo-500 hover:underline">{% trans "View" %}</a>
        <button
          hx-post="{% url 'pricemon-dismiss-alert' alert.pk %}"
          hx-target="#alert-{{ alert.pk }}"
          hx-swap="outerHTML"
          class="text-xs px-2 py-1 bg-white border border-gray-200 rounded text-gray-600 hover:bg-gray-100 transition">
          {% trans "Dismiss" %}
        </button>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}