EE-status-v3/templates/cameras_partial.html

<h3>Cameras</h3>
<h5>Online</h5>
<ul>
{% for camera in template_values['cameras'] %}
    {% if camera.is_online() and camera.bridge_id %}
        <li>{{ camera.name }}</li>
        <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
        <a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
        <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
    {% endif %}
{% endfor %}
<hr>
{% for camera in template_values['cameras'] %}
    {% if camera.is_online() and camera.bridge_id == None %}
        <li>{{ camera.name }}</li>
        <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
        <a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
        <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
    {% endif %}
{% endfor %}
</ul>

<h5>Offline</h5>
<ul>
{% for camera in template_values['cameras'] %}
    {% if camera.is_offline() and camera.bridge_id %}
        <li>{{ camera.name }}</li>
        <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
        <a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
        <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
    {% endif %}
{% endfor %}
<hr>
{% for camera in template_values['cameras'] %}
    {% if camera.is_offline() and camera.bridge_id == None %}
        <li>{{ camera.name }}</li>
        <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
        <a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
        <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
    {% endif %}
{% endfor %}
</ul>

 <button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list">load cameras</button>