<div id="{{ report_id }}-wrapper" hidden>
    <template id="{{ report_id }}-template">
        <style>
         {% include "report.css" %}
        </style>
        <div id="report"
        {# data-test-* attributes are used for testing #}
             {% if summary.plots_skipped %}data-test-plots-skipped{% endif %}
             {% if summary.associations_skipped %}data-test-associations-skipped{% endif %} >
            {% if summary.title %}
            <div class="report-header wrapper text">
                <h1>{{ summary.title }}</h1>
            </div>
            {% endif %}

            {% if summary.dataframe_is_empty  %}
            <div class="text wrapper">
                The dataframe is empty.
            </div>
            {% else %}
            {% include "tabs.html" %}
            {% endif %}
        </div>
    </template>

    <skrub-table-report class="report" id="{{ report_id }}">
    </skrub-table-report>

    <script type="module">
     {% include "report.js" %}
    </script>
</div>

<div id="{{ report_id }}-wrapper-fallback">
    <h2>Please enable javascript</h2>
    <p>
        The skrub table reports need javascript to display correctly. If you are
        displaying a report in a Jupyter notebook and you see this message, you may need to
        re-execute the cell or to trust the notebook (button on the top right or
        "File &gt; Trust notebook").
    </p>
</div>

<script>
 document.getElementById("{{ report_id }}-wrapper").removeAttribute("hidden");
 document.getElementById("{{ report_id }}-wrapper-fallback").setAttribute("hidden", "");
</script>
