{% extends "base.j2" %}

{% block content -%}
<h1 class="fs-4 mb-3 border-bottom pb-3 mb-3">vetR Summarizer <span class="text-primary" data-bs-toggle="tooltip"
        data-bs-title="This number represents the filtered data from aci-vetr-data. Some JSON files has totalCount equal to 0. These files are discarded by default."
        role="button">({{ accordion_items|length }})</span>
</h1>
<div class="d-flex justify-content-end mb-3">
    <div class="btn-group" role="group" aria-label="actions">
        <button type="button" id="toggleAll" class="btn btn-primary" data-bs-toggle="collapse"
            data-bs-target=".multi-collapse" aria-controls=".multi-collapse" onclick="toggleAll(this);">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggles"
                viewBox="0 0 16 16">
                <path
                    d="M4.5 9a3.5 3.5 0 1 0 0 7h7a3.5 3.5 0 1 0 0-7zm7 6a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5m-7-14a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m2.45 0A3.5 3.5 0 0 1 8 3.5 3.5 3.5 0 0 1 6.95 6h4.55a2.5 2.5 0 0 0 0-5zM4.5 0h7a3.5 3.5 0 1 1 0 7h-7a3.5 3.5 0 1 1 0-7" />
            </svg> Toggle All
        </button>
    </div>
</div>
<div class="accordion accordion-flush" id="accordion">
    {% for item in accordion_items -%}
    <div class="accordion-item mb-3 shadow-sm">
        <h2 id="heading{{ loop.index }}" class="accordion-header">
            <button type="button" class="accordion-button collapsed border-3 border-start border-primary-subtle"
                data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" data-bs-title="{{ item.title }}"
                aria-expanded="false" aria-controls="collapse{{ loop.index }}">
                <span class="fw-bold">{{ item.title }}</span>
            </button>
        </h2>
        <div id="collapse{{ loop.index }}" class="accordion-collapse collapse multi-collapse">
            <div class="accordion-body table-responsive">
                <table id="table{{ loop.index }}"
                    class="table table-striped table-bordered table-sm align-middle nowrap w-100" role="table"
                    data-page-length="10">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            {% for header in item.headers %}
                            <th scope="col">{{ header.header }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody class="table-group-divider">
                        {% for row in item.rows %}
                        <tr>
                            <th scope="row">{{ "{:,}".format(loop.index) }}</th>
                            {% for header in item.headers %}
                            <td>{{ row[header.header] }}</td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endfor -%}
</div>
{% endblock content -%}

{% block js %}
<script type="text/javascript">
    $(document).ready(function () {
        {% for item in accordion_items -%}
        $('#table{{ loop.index }}').DataTable({
            info: true,
            ordering: true,
            colReorder: true,
            fixedHeader: true,
            layout: {
                topStart: {
                    pageLength: {
                        menu: [10, 25, 50, { label: 'Show All', value: -1 }]
                    },
                    buttons: [
                        {
                            extend: 'copy',
                            text: 'Copy',
                            className: 'btn-dark',
                            title: '{{ item.title }}'
                        },
                        {
                            extend: 'csv',
                            text: 'CSV',
                            extension: '.csv',
                            className: 'btn-success',
                            filename: '{{ item.title }}_vetR-Summarizer',
                            exportOptions: {
                                columns: ':visible',
                                rows: ':visible'
                            }
                        },
                        {
                            extend: 'colvis',
                            text: 'Columns'
                        }
                    ]
                },
                topEnd: {
                    search: {
                        placeholder: 'Search here...'
                    }
                },
                bottomEnd: {
                    paging: {
                        buttons: 5
                    }
                }
            }
        });
        {% endfor -%}
    });
</script>
{% endblock js %}