{# outerHTML is deliberate: #librenms-sync-tabs carries data-active-tab, which activeSyncTab() reads, so the swap must replace the element itself. #}
<a class="nav-link{% if current_tab == tab_id %} active{% endif %}{% if tab_status.snapshot_available %} sync-cache-ready{% elif tab_status.attention_required %} sync-cache-unavailable{% endif %}" id="{{ tab_id }}-tab"
    data-tab="{{ tab_id }}" href="{{ tab_url }}" hx-get="{{ tab_url }}"
    hx-target="#librenms-sync-tabs" hx-select="#librenms-sync-tabs" hx-swap="outerHTML"
    hx-push-url="true" hx-sync="#librenms-sync-tabs:replace"
    hx-include="#interface-name-field-selector" data-tab-label="{{ tab_label }}"
    role="tab" aria-controls="{{ tab_id }}"
    {% if tab_status.snapshot_available %}title="Cached data is available." aria-label="{{ tab_label }}. Cached data is available."
    {% elif tab_status.attention_required %}title="Cached data is unavailable. Refresh this tab." aria-label="{{ tab_label }}. Cached data is unavailable."
    {% else %}aria-label="{{ tab_label }}"
    {% endif %}
    aria-selected="{% if current_tab == tab_id %}true{% else %}false{% endif %}">
    {{ tab_label }}
</a>