<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><?php echo $object->title() ?></title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>
    <body class="container">
        <?php if ($object->title()): ?>
        <h1><?php echo $object->title() ?></h1>
        <hr/>
        <?php endif ?>
        <?php echo $this->render($object->reports()) ?>
    </body>
    <footer>
        <center>
        Generated by <a href="https://github.com/phpbench/phpbench">PHPBench</a>
        </center>
    </footer>
    <script type="text/javascript">
    /**
     * Resize Plots when tab is activated
     */
    (function () {
        var tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]')
        tabEls.forEach(function (tabEl) {
            tabEl.addEventListener('shown.bs.tab', function (event) {
console.log(event);
                var docs = event.target.parentNode.parentNode.parentNode.querySelectorAll('.tab-pane.active .js-plotly-plot');
                docs.forEach(function (plotEl) {
                    Plotly.relayout(plotEl, {autosize: true});
                });
            });
        });
    })();
    </script>
</html>
