{% include 'ipynb_styles.html' %}
<div class="vizseq-output">

{% macro copy_button(label, export_name) -%}
<button type="button" class="btn btn-secondary btn-sm"
        title="Copy to clipboard"
        data-vizseq-target="{{ export_name }}"
        onclick="
            const root = this.closest('.vizseq-output');
            const source = root &amp;&amp; Array.from(
                root.querySelectorAll('[data-vizseq-export]')
            ).find(
                element =&gt; element.dataset.vizseqExport ===
                    this.dataset.vizseqTarget
            );
            if (source) {
                const temp = document.createElement('textarea');
                temp.value = source.textContent;
                temp.style.position = 'fixed';
                temp.style.opacity = '0';
                document.body.appendChild(temp);
                temp.select();
                document.execCommand('copy');
                temp.remove();
            }
        ">{{ label }}</button>
{%- endmacro %}

{% for s, n in metrics_and_names %}
<div class="container-fluid">
    <h4>{{ n }}</h4>

    <div class="row">
        <div class="col">
            <table class="table table-hover table-sm table-bordered">
                <thead class="thead-light">
                <tr>
                    <th scope="col">
                        {{ copy_button('CSV', 'csv_' + s) }}
                        {{ copy_button('LaTeX', 'latex_' + s) }}
                    </th>
                    {% for m in models %} <th scope="col" style="word-wrap: break-word">{{ m }}</th> {% endfor %}
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">All</th>{% for m in models %} <td>{{ corpus_scores[s][m] }}</td> {% endfor %}
                </tr>
                {% for t in tag_set %}
                <tr>
                    <th scope="row">{{ t }}</th>{% for m in models %}<td>{{ group_scores[s][t][m] }}</td>{% endfor %}
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <span data-vizseq-export="latex_{{ s }}" style="display:none">{{ corpus_and_group_score_latex[s] }}</span>
    <span data-vizseq-export="csv_{{ s }}" style="display:none">{{ corpus_and_group_score_csv[s] }}</span>
</div>
{% endfor %}

</div>