{% set component_slug = component.slug if component is defined else "ws-ecc" %}
{% set component_ws_path = component.params.endpoint if component is defined and component.params and component.params.endpoint else "/ws/ecc" %}
<section class="panel glow-panel ws-panel ws-ecc" data-component="{{ component_slug }}" data-ws-path="{{ component_ws_path }}" data-state="connecting" data-connection="connecting" data-direction="idle">
    <header class="ws-panel__header ws-ecc__header">
        <div class="ws-panel__title ws-ecc__title">
            <p class="ws-panel__eyebrow ws-ecc__eyebrow">WebSocket</p>
            <h2>Connection pulse</h2>
            <p class="muted">Watch the ECC pulse on send (TX) and receive (RX).</p>
        </div>
        <div class="ws-panel__badges ws-ecc__badges">
            <span class="ws-panel__badge" data-role="connection">Connecting</span>
            <span class="ws-panel__badge ws-panel__badge--ghost" data-role="direction">Idle</span>
        </div>
    </header>

    <div class="ws-panel__viewport ws-ecc__signal">
        <div class="ws-ecc__time">
            <span class="ws-ecc__time-label" data-role="timeline-start">0.0s</span>
            <span class="ws-ecc__time-label" data-role="timeline-end">0.0s</span>
        </div>
        <div class="ws-ecc__timeline-scroll" data-role="timeline-scroll">
            <div class="ws-ecc__timeline" data-role="timeline">
                <div class="ws-ecc__baseline"></div>
            </div>
        </div>
        <div class="ws-panel__overlay ws-ecc__overlay">
            <div class="ws-panel__hud ws-ecc__metrics">
                <div class="ws-panel__metric-row ws-ecc__metric">
                    <span class="ws-ecc__label">Latency</span>
                    <strong class="ws-ecc__value" data-metric="latency">-- ms</strong>
                </div>
                <div class="ws-panel__metric-row ws-ecc__metric">
                    <span class="ws-ecc__label">Upload</span>
                    <strong class="ws-ecc__value" data-metric="upload">-- kb/s</strong>
                </div>
                <div class="ws-panel__metric-row ws-ecc__metric">
                    <span class="ws-ecc__label">Download</span>
                    <strong class="ws-ecc__value" data-metric="download">-- kb/s</strong>
                </div>
            </div>
        </div>
    </div>

    <div class="ws-panel__controls ws-ecc__controls">
        <button class="ws-panel__button ws-ecc__button ws-ecc__button--heart" type="button" data-action="toggle" disabled>
            <span class="ws-ecc__heart" aria-hidden="true">
                <svg viewBox="0 0 24 24" role="presentation">
                    <path d="M12 20.5c-5.5-4.1-8.5-7.2-8.5-10.6A4.9 4.9 0 0 1 8.4 5a5.4 5.4 0 0 1 3.6 1.6A5.4 5.4 0 0 1 15.6 5a4.9 4.9 0 0 1 4.9 4.9c0 3.4-3 6.5-8.5 10.6z" />
                </svg>
            </span>
            <span data-role="toggle-label">Start</span>
        </button>
        <div class="ws-ecc__sliders">
            <div class="ws-ecc__slider">
                <div class="ws-ecc__slider-header">
                    <span class="ws-ecc__slider-label">Tempo</span>
                    <span class="ws-ecc__slider-value" data-control-value="tempo">0.1s</span>
                </div>
                <input
                    class="ws-panel__range ws-ecc__range"
                    type="range"
                    min="0.1"
                    max="5"
                    step="0.1"
                    value="0.1"
                    data-control="tempo"
                />
            </div>
        </div>
    </div>
</section>