<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>SVL Plots</title>
        {% if plotly_offline %}
        <script>
            {{ plotly_js }}
        </script>
        {% else %}
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        {% endif %}
        
        <style>
            .container {
                display: grid;
                grid-template-columns: repeat({{ num_columns }}, minmax(300px, {{ 100 / num_columns }}vw));
                grid-template-rows: repeat({{ num_rows }}, minmax(300px, {{ 100 / num_rows }}vh));
            }

            {% for plot in plots %}
            #p{{ plot.row_start }}_{{ plot.column_start }} {
                grid-column-start: {{ plot.column_start }};
                grid-column-end: {{ plot.column_end }};
                grid-row-start: {{ plot.row_start }};
                grid-row-end: {{ plot.row_end }};
            }
            {% endfor %}
        </style>
    </head>
    <body>
        <div class="container">
            {% for plot in plots %}
            <div id="p{{ plot.row_start }}_{{ plot.column_start }}">
            </div>
            {% endfor %}
        </div>
        <script>
            {% for plot in plots %}
            var plot_{{ plot.row_start }}_{{ plot.column_start }} = 
                Plotly.newPlot(
                    "p{{ plot.row_start }}_{{ plot.column_start }}",
                    {{ plot.plotly | tojson }}
                );
            {% endfor %}
        </script>
    </body>
</html>