{% set component_slug = component.slug if component is defined else "ws-heartbeat-earth" %}
{% set component_ws_path = component.params.endpoint if component is defined and component.params and component.params.endpoint else "/ws/heartbeat-earth" %}
<section class="panel glow-panel ws-panel ws-heartbeat-earth" data-component="{{ component_slug }}" data-ws-path="{{ component_ws_path }}" data-state="idle">
    <header class="ws-panel__header ws-heartbeat-earth__header">
        <div class="ws-panel__title ws-heartbeat-earth__title">
            <p class="ws-panel__eyebrow ws-heartbeat-earth__eyebrow">Planetary WebSocket</p>
            <h2>HeartBeatMonitorEarth</h2>
        </div>
        <div class="ws-panel__badges ws-heartbeat-earth__badges">
            <span class="ws-panel__badge ws-heartbeat-earth__badge" data-role="connection">Connecting</span>
            <span class="ws-panel__badge ws-panel__badge--ghost ws-heartbeat-earth__badge ws-heartbeat-earth__badge--ghost" data-role="direction">Idle</span>
        </div>
    </header>

    <div class="ws-panel__viewport ws-heartbeat-earth__viewport">
        <canvas class="ws-panel__canvas ws-heartbeat-earth__canvas" data-role="canvas"></canvas>
        <div class="ws-panel__overlay ws-heartbeat-earth__overlay">
            <div class="ws-panel__hud ws-heartbeat-earth__hud">
                <div class="ws-panel__metric-row ws-heartbeat-earth__metric-row">
                    <span>Latency</span>
                    <strong data-metric="latency">-- ms</strong>
                </div>
                <div class="ws-panel__metric-row ws-heartbeat-earth__metric-row">
                    <span>Jitter</span>
                    <strong data-metric="jitter">-- ms</strong>
                </div>
                <div class="ws-panel__metric-row ws-heartbeat-earth__metric-row">
                    <span>TX</span>
                    <strong data-metric="tx-rate">TX: --</strong>
                </div>
                <div class="ws-panel__metric-row ws-heartbeat-earth__metric-row">
                    <span>RX</span>
                    <strong data-metric="rx-rate">RX: --</strong>
                </div>
                <div class="ws-panel__metric-row ws-heartbeat-earth__metric-row">
                    <span>Total Sent</span>
                    <strong data-metric="total-sent">0 B (0 pkgs)</strong>
                </div>
                <div class="ws-panel__metric-row ws-heartbeat-earth__metric-row">
                    <span>Total Received</span>
                    <strong data-metric="total-received">0 B (0 pkgs)</strong>
                </div>
            </div>
        </div>
    </div>

    <div class="ws-panel__controls ws-heartbeat-earth__controls">
        <button class="ws-panel__button ws-heartbeat-earth__button" type="button" data-action="toggle" disabled>
            <span data-role="toggle-label">Start Sweep</span>
        </button>
        <label class="ws-panel__tempo ws-heartbeat-earth__tempo">
            <span>Cadence</span>
            <span data-control-value="tempo">1.0s</span>
        </label>
        <input class="ws-panel__range ws-heartbeat-earth__range" type="range" min="0.2" max="5" step="0.1" value="1.0" data-control="tempo" />
    </div>
</section>