{% set component_slug = component.slug if component is defined else "ws-heartbeat-cardio" %}
{% set component_ws_path = component.params.endpoint if component is defined and component.params and component.params.endpoint else "/ws/heartbeat-cardio" %}
<section class="panel glow-panel ws-panel ws-heartbeat-cardio" data-component="{{ component_slug }}" data-ws-path="{{ component_ws_path }}" data-state="idle">
    <header class="ws-panel__header ws-heartbeat-cardio__header">
        <div class="ws-panel__title ws-heartbeat-cardio__title">
            <p class="ws-panel__eyebrow ws-heartbeat-cardio__eyebrow">Cardio WebSocket</p>
            <h2>HeartBeatCardio</h2>
            <p class="ws-panel__legend ws-heartbeat-cardio__legend">3D cardiogram sweep mapped to keepalive acknowledgements.</p>
        </div>
        <div class="ws-panel__badges ws-heartbeat-cardio__badges">
            <span class="ws-panel__badge ws-heartbeat-cardio__badge" data-role="connection">Connecting</span>
            <span class="ws-panel__badge ws-panel__badge--ghost ws-heartbeat-cardio__badge ws-heartbeat-cardio__badge--ghost" data-role="direction">Idle</span>
        </div>
    </header>

    <div class="ws-panel__viewport ws-heartbeat-cardio__viewport">
        <canvas class="ws-panel__canvas ws-heartbeat-cardio__canvas" data-role="canvas"></canvas>
        <div class="ws-panel__hud ws-heartbeat-cardio__hud">
            <div class="ws-panel__metric-row ws-heartbeat-cardio__metric-row">
                <span>Latency</span>
                <strong data-metric="latency">-- ms</strong>
            </div>
            <div class="ws-panel__metric-row ws-heartbeat-cardio__metric-row">
                <span>Jitter</span>
                <strong data-metric="jitter">-- ms</strong>
            </div>
            <div class="ws-panel__metric-row ws-heartbeat-cardio__metric-row">
                <span>RX</span>
                <strong data-metric="rx-rate">RX: --</strong>
            </div>
            <div class="ws-panel__metric-row ws-heartbeat-cardio__metric-row">
                <span>Total Received</span>
                <strong data-metric="total-received">0 B (0 pkgs)</strong>
            </div>
        </div>
    </div>

    <div class="ws-panel__controls ws-heartbeat-cardio__controls">
        <button class="ws-panel__button ws-heartbeat-cardio__button" type="button" data-action="toggle" disabled>
            <span data-role="toggle-label">Start Cardio</span>
        </button>
        <label class="ws-panel__tempo ws-heartbeat-cardio__tempo">
            <span>Cadence</span>
            <span data-control-value="tempo">1.0s</span>
        </label>
        <input class="ws-panel__range ws-heartbeat-cardio__range" type="range" min="0.2" max="3" step="0.1" value="1.0" data-control="tempo" />
    </div>
</section>