{% comment %}Render a simple leave list with data attributes so client JS can read them{% endcomment %}
<div id="leave-list">
  <ul>
    {% for l in leaves %}
      <li data-start="{{ l.start_date|date:'Y-m-d' }}" data-end="{{ l.end_date|date:'Y-m-d' }}">
        <span class="leave-range">{{ l.start_date }} → {{ l.end_date }}</span>{% if l.reason %} <em>({{ l.reason }})</em>{% endif %}
     <!-- Rely on the server to return an out-of-band (OOB) swap that updates
       the #leave-list. Prevent htmx from attempting the main swap by
       disabling the default swap for this request. -->
     {% comment %}Only show delete control when the current request is allowed to delete:{% endcomment %}
  {% if request.user.is_staff or request.user.is_authenticated and request.user.email and request.user.email == l.worker.email or token %}
     <form method="post" action="{% url 'rota:leave_delete' l.id %}" hx-post="{% url 'rota:leave_delete' l.id %}" hx-swap="none" style="display:inline;margin-left:0.5rem">
          {% csrf_token %}
          {% if token %}<input type="hidden" name="token" value="{{ token }}">{% endif %}
          <button class="button is-small is-danger" type="submit" onclick="return confirm('Delete this leave request?');">Delete</button>
        </form>
     {% endif %}
      </li>
    {% empty %}
      <li>No leave recorded</li>
    {% endfor %}
  </ul>
</div>