EE-status-v3/templates/cameras_partial.html

<h3>Cameras <i class="bi bi-camera-video"></i></h3>
<h5>Online</h5>
{% for camera in template_values['cameras'] %}
    {% if camera.is_online() %}
        <div class="row">
            <div class="col-sm-5 col-md-6 offset-1 left_text" style="overflow: hidden;">
                {{ camera.name }}
            </div>
            <div class="col-sm-6 col-md-5">
                <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail" hx-indicator=".progress">
                    <button class="btn btn-outline-success">
                        <i class="bi bi-card-image" title="click to load preview image"></i>
                    </button>
                </a>
                <a href="/camera/{{ camera.id }}/events" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
                    <button class="btn btn-outline-success">
                        <i class="bi bi-calendar-event" title="click to load events list"></i>
                    </button>
                </a>
                <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot" hx-indicator=".progress">
                    <button class="btn btn-outline-success">
                        <i class="bi bi-bar-chart" title="click to generate graph of events"></i>
                    </button>
                </a>
            </div>
        </div>
    {% endif %}
{% endfor %}

<h5>Offline</h5>
{% for camera in template_values['cameras'] %}
    {% if camera.is_offline() %}
        <div class="row">
            <div class="col-sm-5 col-md-6 offset-1 left_text" style="overflow: hidden;">
                {{ camera.name }}
            </div>
            <div class="col-sm-6 col-md-5">
                <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail" hx-indicator=".progress">
                    <button class="btn btn-outline-success">
                        <i class="bi bi-card-image" title="click to load preview image"></i>
                    </button>
                </a>
                <a href="/camera/{{ camera.id }}/events" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
                    <button class="btn btn-outline-success">
                        <i class="bi bi-calendar-event" title="click to load events list"></i>
                    </button>
                </a>
                <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot" hx-indicator=".progress">
                    <button class="btn btn-outline-success">
                        <i class="bi bi-bar-chart" title="click to generate graph of events"></i>
                    </button>
                </a>
            </div>
        </div>
    {% endif %}
{% endfor %}


 <button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list"  class="btn btn-md btn-secondary" hx-indicator=".progress">load cameras</button>
<br>