{% extends "base.html" %}

{% block extra_head %}
<style>
    :root {
        --controls-width: {{ controls_width }}%;
        --figure-width: {{ figure_width }}px;
        --figure-height: {{ figure_height }}px;
    }
</style>
{% endblock %}

{% block content %}
<div class="viewer-container {% if controls_position in ['left', 'right'] %}d-flex flex-row{% else %}d-flex flex-column{% endif %} h-100"
     data-controls-position="{{ controls_position }}"
     data-continuous="{{ continuous|default(false)|tojson }}">
    {% if controls_position in ['left', 'top'] %}
        <div class="controls-container {% if controls_position == 'left' %}w-controls{% else %}w-100{% endif %}">
            <form id="controls-form" class="p-3">
                {{ components|join('')|safe }}
            </form>
        </div>
    {% endif %}

    <div class="plot-container {% if controls_position in ['left', 'right'] %}flex-grow-1{% else %}w-100{% endif %} d-flex justify-content-center align-items-center p-3">
        <img id="plot" src="{% if initial_plot %}data:image/png;base64,{{ initial_plot }}{% endif %}" alt="Plot" class="img-fluid">
    </div>

    {% if controls_position in ['right', 'bottom'] %}
        <div class="controls-container {% if controls_position == 'right' %}w-controls{% else %}w-100{% endif %}">
            <form id="controls-form" class="p-3">
                {{ components|join('')|safe }}
            </form>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    // Initialize the viewer with configuration
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.querySelector('.viewer-container');
        window.viewer = new SydViewer({
            controlsPosition: container.dataset.controlsPosition,
            continuous: JSON.parse(container.dataset.continuous),
            updateInterval: 200
        });
    });
</script>
{% endblock %} 