{% from "macros.html" import excel_button %}
<div id="app">
    {% if back %}
        <button type="button"
                class="btn btn-primary position-relative"
                onclick="location.href='{{ back }}'">
            Back to {{ back_name }}
            <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
                <span class="visually-hidden">Back to {{ back_name }}</span>
            </span>
        </button>
    {% endif %}
    <section class="section">
        <div class="container-fluid">
            <div>
                <table class="table table-bordered bg-light">
                    <thead>
                        <tr class="bg-info text-white">
                            <th class="text-center">Platform</th>
                            <th class="text-center">Model</th>
                            <th class="text-center">Date</th>
                            <th class="text-center">Time</th>
                            {% if data.duration > 7200 %}
                                {% set unit = "h" %}
                                {% set divider = 3600 %}
                            {% else %}
                                {% set unit = "min" %}
                                {% set divider = 60 %}
                            {% endif %}
                            <th class="text-center">Duration ({{ unit }})</th>
                            <th class="text-center">Stratified</th>
                            <th class="text-center">Discretized</th>
                            <th class="text-center"># Folds</th>
                        </tr>
                        <tr>
                            <th class="text-center">{{ data.platform }}</th>
                            <th class="text-center">{{ data.model }} {{ data.version }}</th>
                            <th class="text-center">{{ data.date }}</th>
                            <th class="text-center">{{ data.time }}</th>
                            <th class="text-center">{{ "%.2f" % (data.duration/divider) }}</th>
                            <th class="text-center">{{ data.stratified }}</th>
                            <th class="text-center">{{ data.discretized }}</th>
                            <th class="text-center">{{ data.folds }}</th>
                        </tr>
                        <tr>
                            <th class="text-center bg-info text-white">Language</th>
                            <th class="text-center" colspan=3>{{ data.language }} {{ data.language_version }}</th>
                            <th class="text-center bg-info text-white">Seeds</th>
                            <th class="text-center" colspan=6>{{ data.seeds }}</th>
                        </tr>
                    </thead>
                </table>
                <div>{{ excel_button([ file ]) }}</div>
                <table class="table table-striped table-hover table-bordered bg-light"
                       id="table-report"
                       data-toggle="table"
                       data-sticky-header="true"
                       data-sticky-header-offset-y="50"
                       data-sortable="true">
                    <thead>
                        <tr class="bg-primary text-white">
                            <th class="text-center" data-field="dataset" data-sortable="true">Dataset</th>
                            <th class="text-center"
                                data-field="samples"
                                data-sortable="true"
                                data-sorter="remove_dot">Samples</th>
                            <th class="text-center"
                                data-field="features"
                                data-sortable="true"
                                data-sorter="remove_dot">Features</th>
                            <th class="text-center"
                                data-field="classes"
                                data-sortable="true"
                                sdata-orter="remove_dot">Classes</th>
                            <th class="text-center"
                                data-field="nodes"
                                data-sortable="true"
                                data-sorter="remove_dot">Nodes</th>
                            <th class="text-center"
                                data-field="score"
                                data-sortable="true"
                                data-sorter="remove_plus">{{ data.score_name|capitalize }}</th>
                            <th class="text-center"></th>
                            <th class="text-center"
                                data-field="time"
                                data-sortable="true"
                                data-sorter="remove_plus">Time</th>
                            <th class="text-center" data-field="hyperparameters" data-sortable="true">Hyperparameters</th>
                        </tr>
                    </thead>
                    <script>
                        function remove_plus(a, b) {
                          var aa = a.split('±')[0]
                          var bb = b.split('±')[0]
                          return aa - bb
                        }
                        function remove_dot(a, b) {
                            var aa = a.replace(',', '').replace('.', '')
                            var bb = b.replace(',', '').replace('.', '')
                            return aa - bb
                        }
                    </script>
                    <tbody>
                        {% for item in data.results %}
                            <tr>
                                <td class="text-left">
                                    <a href="{{ url_for("results.dataset_report", dataset=item.dataset) }}">{{ item.dataset }}</a>
                                </td>
                                <td class="text-end">{{ '{:,}'.format(item.samples) }}</td>
                                <td class="text-end">{{"%d" % item.features}}</td>
                                <td class="text-end">{{"%d" % item.classes}}</td>
                                <td class="text-end">{{ '{:,.2f}'.format(item.nodes) }}</td>
                                <td class="text-end">{{"%.6f±%.4f" % (item.score, item.score_std)}}</td>
                                <td class="text-center">{{ item.symbol|safe }}</td>
                                <td class="text-end">{{"%.6f±%.4f" % (item.time, item.time_std)}}</td>
                                <td class="text-center">{{ item.hyperparameters }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% if summary|length > 0 %}
                    <div class="col-4 col-lg-4">
                        <table class="table table-bordered bg-light">
                            <thead>
                                <tr>
                                    <th class="text-center bg-primary text-white">Symbol</th>
                                    <th class="text-center bg-primary text-white">Meaning</th>
                                    <th class="text-center bg-primary text-white">Count</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for key, value in summary.items() %}
                                    <tr>
                                        <td class="text-center">{{ key }}</td>
                                        <td>{{ value[0] }}</td>
                                        <td class=text-end>{{ '{:,}'.format(value[1]) }}</td>
                                    </tr>
                                </tbody>
                            {% endfor %}
                        </table>
                    </div>
                {% endif %}
                <h7>
                <b>
                    Total score: {{ "%.6f" % (data.results | sum(attribute="score") ) }}
                </b>
                </h7>
                <h7>
                Number of files: {{ data.results | length }}
                </h7>
            </div>
        </section>
    </div>