{% comment %}

Container for rendering plots

Features:
- Loading spinner and functions to show/hide it while plot is loading

Input:
- id: prefix used in the identifiers of all elements
- ratio: plot aspect ratio (default: not defined)
- height: plot height (default: not defined)
- width: plot width (default: not defined)

{% endcomment %}

<style>
    #{{ id }}-plot {
        {% if ratio %}aspect-ratio: {{ ratio }};{% endif %}
        {% if width %}width: {{ width }};{% endif %}
        {% if height %}height: {{ height }};{% endif %}
    }
</style>

<div id="{{ id }}-plot" class="container-xxl">
    <div id="{{ id }}-spinner" class="loading-state">
        <div class="loader"></div>
    </div>
</div>