{% if 'plotly' in data %}
{% set plot_counter.value = plot_counter.value + 1 %}
{% set plotly_chart_title = data.plotly | plotly_chart_get_title | striptags %}
<div>
{% if plotly_chart_title %}
  {{ plotly_chart_title }}
{% else %}
  {{ schema.title | get_translated_text }} #{{ loop.index }}
{% endif %}
    <button id="plotly_info_button_{{ name }}_{{ plot_counter.value }}" type="button" class="btn btn-link" data-toggle="modal" data-target="#plotly_modal_{{ name }}_{{ plot_counter.value }}">[{{ _('show plot') }}]</button>
    <div class="modal fade bd-example-modal-lg" id="plotly_modal_{{ name }}_{{ plot_counter.value }}" tabindex="-1" aria-labelledby="plotly_modal_title_{{ name }}_{{ plot_counter.value }}" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="plotly_modal_title_{{ name }}_{{ plot_counter.value }}">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      {% if plotly_chart_title %}
                        {{ plotly_chart_title }}
                      {% else %}
                        {{ schema.title | get_translated_text }} #{{ loop.index }}
                      {% endif %}
                    </h5>
                </div>
                <div class="modal-body" style="display: flex; justify-content: center">
                  <div id="plotly_plot_div_{{ name }}_{{ plot_counter.value }}"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        window.plotly_charts.push(['plotly_plot_div_{{ name }}_{{ plot_counter.value }}', {{ data.plotly|tojson|safe }}]);
    </script>
  </div>
{% else %}
  &mdash;
{% endif %}
