{% extends "base.html" %}

{% block title %}Waveforms - {{ title }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-body">
                <h2 class="card-title">
                    <i class="bi bi-graph-up"></i> Waveform Viewer
                </h2>
                <p class="text-muted">{{ filename }}</p>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div id="waveformPlot" style="width: 100%; height: 600px;"></div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">Controls</h5>
                <div class="btn-group" role="group">
                    <button class="btn btn-outline-secondary" onclick="resetZoom()">
                        <i class="bi bi-zoom-out"></i> Reset Zoom
                    </button>
                    <button class="btn btn-outline-secondary" onclick="togglePan()">
                        <i class="bi bi-arrows-move"></i> Pan
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    const sessionId = '{{ session_id }}';
    const plotlyConfig = {{ plotly_config|safe }};

    async function loadWaveform() {
        try {
            const response = await fetch(`/api/session/${sessionId}/waveform`);
            const data = await response.json();

            Plotly.newPlot('waveformPlot', data.data, data.layout, plotlyConfig);
        } catch (error) {
            console.error('Failed to load waveform:', error);
            document.getElementById('waveformPlot').innerHTML =
                '<div class="alert alert-danger">Failed to load waveform data</div>';
        }
    }

    function resetZoom() {
        Plotly.relayout('waveformPlot', {
            'xaxis.autorange': true,
            'yaxis.autorange': true
        });
    }

    function togglePan() {
        const plot = document.getElementById('waveformPlot');
        Plotly.relayout(plot, {dragmode: 'pan'});
    }

    // Load waveform on page load
    loadWaveform();
</script>
{% endblock %}
