{% if data is not none and 'plotly' in data %}
  {% set plotly_chart_title = data.plotly | plotly_chart_get_title | striptags %}
  {% set plot_id = (id_prefix ~ '_plot') | get_hash  %}
<div>
  {% if plotly_chart_title %}
    {{ plotly_chart_title }}
  {% else %}
    {{ schema.title | get_translated_text }} {% if loop %}#{{ loop.index }}{% endif %}
  {% endif %}
  <button id="plotly_info_button_{{ plot_id }}" type="button" class="btn btn-link" style="vertical-align: initial; padding: 0; line-height: 1" data-toggle="modal" data-target="#plotly_modal_{{ plot_id }}">[{{ _('show plot') }}]</button>
  <div class="modal fade bd-example-modal-lg" id="plotly_modal_{{ plot_id }}" tabindex="-1" aria-labelledby="plotly_modal_title_{{ plot_id }}" 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_{{ plot_id }}">
            <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 }} {% if loop %}#{{ loop.index }}{% endif %}
            {% endif %}
          </h5>
        </div>
        <div class="modal-body" style="display: flex; justify-content: center">
          <div id="plotly_plot_div_{{ plot_id }}"></div>
        </div>
      </div>
    </div>
  </div>

  <script type="application/json" data-sampledb-plotly-chart="plotly_plot_div_{{ plot_id }}">
    {{ data.plotly | tojson | safe }}
  </script>
</div>
{% else %}
  &mdash;
{% endif %}