<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>VETR Summarizer</title>
    <link rel="shortcut icon" href="https://github.com/cisco/cisco.github.io/raw/master/favicon.ico"
        type="image/x-icon" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.5/css/dataTables.bootstrap5.css" />
</head>

<body>
    <div class="container-fluid py-4">
        <h1 class="fs-4 mb-3">VETR Summarizer ({{ accordion_items|length }})</h1>
        <div class="accordion accordion-flush" id="accordion">
            {% for item in accordion_items -%}
            <div class="accordion-item">
                <div class="accordion-header" id="heading{{ loop.index }}">
                    <button class="accordion-button {% if loop.index != 1 %}collapsed{% endif %}"
                        data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="true"
                        aria-controls="collapse{{ loop.index }}">
                        <span class="fw-bold">{{ loop.index }}. {{ item.title }}</span>
                    </button>
                </div>
                <div id="collapse{{ loop.index }}"
                    class="accordion-collapse collapse {% if loop.index == 1 %}show{% endif %}"
                    aria-labelledby="heading{{ loop.index }}" data-bs-parent="#accordion">
                    <div class="accordion-body">
                        <div class="table-responsive">
                            <table id="table{{ loop.index }}"
                                class="table table-striped table-bordered table-sm align-middle display" role="table">
                                <thead>
                                    <tr>{{ item.headers }}</tr>
                                </thead>
                                <tbody class="table-group-divider">
                                    {{ item.rows }}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor -%}
        </div>
        <div class="text-center">
            <p class="lead mt-3 mb-1">End of Page</p>
            <p class="small text-primary mb-0" id="up" role="button" tabindex="10">Back to Top</p>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/2.1.5/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.1.5/js/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            {% for item in accordion_items -%}
            $('#table{{ loop.index }}').DataTable({
                info: true,
                ordering: true,
                paging: true,
                lengthMenu: [
                    [10, 25, 50, -1],
                    [10, 25, 50, 'All']
                ]
            });
            {% endfor -%}
            document.getElementById('up').addEventListener('click', () => { let h1Tag = document.querySelector('h1').getBoundingClientRect().top; document.documentElement.scrollTo({ top: h1Tag, behavior: 'smooth' }) })
        });
    </script>
</body>

</html>