{% extends "admin/change_list.html" %}
{% load i18n %}

{% block extrahead %}
  {{ block.super }}
  <script src="https://unpkg.com/htmx.org@2.0.4"
          integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
          crossorigin="anonymous"></script>
  <script src="https://unpkg.com/idiomorph@0.7.3/dist/idiomorph-ext.min.js"></script>
  <style>
    .celeryx-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 4px;
      vertical-align: middle;
    }
    .celeryx-dot.on {
      background: #22c55e;
      animation: celeryx-pulse 2s infinite;
    }
    .celeryx-dot.off {
      background: #9ca3af;
    }
    @keyframes celeryx-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
  </style>
{% endblock %}

{% block object-tools-items %}
  <li>
    {% if live %}
      <a href="{{ live_toggle_url }}" title="{% translate 'Disable auto-refresh' %}">
        <span class="celeryx-dot on"></span> {% translate "Live" %}
      </a>
    {% else %}
      <a href="{{ live_toggle_url }}" title="{% translate 'Enable auto-refresh' %}">
        <span class="celeryx-dot off"></span> {% translate "Live" %}
      </a>
    {% endif %}
  </li>
{% endblock %}

{% block result_list %}
  {% if live %}
    <div hx-get="{{ live_url }}"
         hx-trigger="every {{ refresh_interval }}s"
         hx-select="#result_list"
         hx-target="#result_list"
         hx-swap="morph"
         hx-ext="morph">
  {% endif %}

  {{ block.super }}

  {% if live %}
    </div>
  {% endif %}
{% endblock %}