<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Dashboard</title>
        <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
        <link href="/static/css/styles.css" rel="stylesheet" />
        <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
    </head>
    <body class="sb-nav-fixed">
        <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
            <!-- Navbar Brand-->
            <a class="navbar-brand ps-3" href="index.html">Panther</a>
            <!-- Sidebar Toggle-->
            <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
            <!-- Navbar-->
            <ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#!">Settings</a></li>
                        <li><a class="dropdown-item" href="#!">Activity Log</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div id="layoutSidenav">
            <div id="layoutSidenav_nav">
                <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
                    <div class="sb-sidenav-menu">
                        <div class="nav">
                            <div class="sb-sidenav-menu-heading">Core</div>
                            <a class="nav-link" href="index.html">
                                <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                                QUIC tests
                            </a>
                            <a class="nav-link" href="creator.html">
                                <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                                QUIC editorf
                            </a>
                            <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
                                <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                                QUIC results
                                <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                             </a>
                            <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
                                <nav class="sb-sidenav-menu-nested nav">
                                    <a class="nav-link" href="results.html">
                                        <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                                        QUIC results viewer
                                    </a>
                                    <a class="nav-link" href="results-global.html">
                                        <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                                        QUIC results global
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <div class="sb-sidenav-footer">
                        version 0.1
                    </div>
                </nav>
            </div>
            <div id="layoutSidenav_content">
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4">QUIC results</h1>
                        <div class="row">
                            <div class="btn-group" role="group" aria-label="Select test ID">
                                {% if page > 0 %}
                                    <a href="?page={{ page - 1 }}" class="btn btn-outline-primary">&laquo;</a>
                                {% endif %}

                                {% if page <= 5 %}
                                    {% for page_number in range(11) %}
                                        {% if items_page.number == (page_number) %}
                                            <button class="btn btn-outline-primary active">
                                                <span>{{ nb_exp - (page_number) }} <span class="sr-only">(current)</span></span>
                                            </button>
                                        {% else %}
                                            <a href="?page={{ page_number }}" class="btn btn-outline-primary">
                                                {{ nb_exp - (page_number) }}
                                            </a>
                                        {% endif %}
                                    {% endfor %}
                                {% elif page <= nb_exp and page > nb_exp-6 %}
                                    {% for page_number in range(11,0,-1) %}
                                        {% if items_page.number == (nb_exp - page_number + 1) %}
                                            <button class="btn btn-outline-primary active">
                                                <span>{{ nb_exp - (nb_exp - page_number + 1) }} <span class="sr-only">(current)</span></span>
                                            </button>
                                        {% else %}
                                            <a href="?page={{ nb_exp - page_number + 1}}" class="btn btn-outline-primary">
                                                {{ nb_exp - (nb_exp - page_number + 1) }}
                                            </a>
                                        {% endif %}
                                    {% endfor %}
                                {% else %}
                                    {% for page_number in range(5) %}
                                            <a href="?page={{ page_number+page-5 }}" class="btn btn-outline-primary">
                                                {{ nb_exp - (page_number+page-5) }}
                                            </a>
                                    {% endfor %}
                                    <button class="btn btn-outline-primary active">
                                        <span>{{ nb_exp - (page)}} <span class="sr-only">(current)</span></span>
                                    </button>
                                    {% for page_number in range(6,11) %}
                                            <a href="?page={{ page_number+page-5 }}" class="btn btn-outline-primary">
                                                {{ nb_exp - (page_number+page-5) }}
                                            </a>
                                    {% endfor %}
                                    {% endif %}
                                {% if page < nb_exp %}
                                    <a href="?page={{ page + 1 }}" class="btn btn-outline-primary">&raquo;</a>
                                {% endif %}
                            </div>
                        </div>
                        <br>
                        <div class="card mb-3" id="accordion">
                            <div class="card-header" id="heading8">
                                <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse8" aria-expanded="true" aria-controls="collapse8" role="button">
                                    <i class="fas fa-chart-bar me-1"></i>
                                </a>
                               Summary
                            </div>
                            <div id="collapse8" class="collapse show" aria-labelledby="heading8" data-parent="#accordion">
                                <div class="card-body">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Test name</th>
                                                <th>Test date</th>
                                                <th>Implementation tested</th>
                                                <th>Version tested</th>
                                                <th>Test status</th>
                                                <th>Number of packets generated</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td> {{ summary["test_name"] }} </td>
                                                <td> {{ summary["date"] }} </td>
                                                <td> {{ summary["implementation"] }} {{ summary["test_type"]}} </td>
                                                <td> {{ summary["initial_version"] }} </td>
                                                <td> {{ summary["test_result"] }} </td>
                                                <td> {{ summary["nb_pkt"] }} </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="container-fluid px-4"> 
                                <iframe srcdoc="{{ df_csv_content }}" width="100%" height="500px"></iframe>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-6">
                                <div class="card mb-4" id="accordion">
                                    <div class="card-header" id="headingOne">
                                        <a class="btn btn-link collapsed" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" role="button">
                                            <i class="fas fa-chart-bar me-1"></i>
                                        </a>
                                        Implementations STDOUT
                                    </div>
                                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                                        <div class="card-body">
                                            <p class="text-break overflow-auto" style="white-space: pre-wrap; max-height: 400px">{{ implem_out }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div class="card mb-4" id="accordion">
                                    <div class="card-header" id="heading2">
                                        <a class="btn btn-link collapsed" data-bs-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2" role="button">
                                            <i class="fas fa-chart-bar me-1"></i>
                                        </a>
                                        Implementations STDERR
                                    </div>
                                    <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
                                        <div class="card-body">
                                            <p class="text-break overflow-auto" style="white-space: pre-wrap; max-height: 400px">{{ implem_err }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-6">
                                <div class="card mb-4" id="accordion">
                                    <div class="card-header" id="heading3">
                                        <a class="btn btn-link collapsed" data-bs-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3" role="button">
                                            <i class="fas fa-chart-bar me-1"></i>
                                        </a>
                                        Ivy STDOUT
                                    </div>
                                    <div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion">
                                        <div class="card-body">
                                            <p class="text-break overflow-auto" style="white-space: pre-wrap; max-height: 400px">{{ ivy_stdout }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div class="card mb-4" id="accordion">
                                    <div class="card-header" id="heading4">
                                        <a class="btn btn-link collapsed" data-bs-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4" role="button">
                                            <i class="fas fa-chart-bar me-1"></i>
                                        </a>
                                        Ivy STDERR
                                    </div>
                                    <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion">
                                        <div class="card-body">
                                            <p class="text-break overflow-auto" style="white-space: pre-wrap; max-height: 400px">{{ ivy_stderr }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-3" id="accordion">
                            <div class="card-header" id="heading5">
                                <a class="btn btn-link collapsed" data-bs-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5" role="button">
                                    <i class="fas fa-chart-bar me-1"></i>
                                </a>
                                Ivy trace
                            </div>
                            <div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion">
                                <div class="row g-0">
                                <div class="col-md-6">
                                    <img src={{ plantuml_file_png }} class="img-fluid rounded-start" alt="...">
                                </div>
                                <div class="col-md-6">
                                    <div class="card mb-1">
                                        <div class="card-header">
                                            <i class="fas fa-chart-area me-1"></i>
                                            Ivy trace parameters
                                        </div>
                                        <div class="card-body">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
                                                <label class="form-check-label" for="flexCheckDefault">
                                                Show packets
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
                                                <label class="form-check-label" for="flexCheckChecked">
                                                Show packets contents
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault1" checked>
                                                <label class="form-check-label" for="flexCheckDefault">
                                                Show frames
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked1" checked>
                                                <label class="form-check-label" for="flexCheckChecked">
                                                Show frames contents
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2" checked>
                                                <label class="form-check-label" for="flexCheckDefault">
                                                Show TLS events
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card mb-4" id="accordion">
                                        <div class="card-header" id="heading5">
                                            <a class="btn btn-link collapsed" data-bs-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5" role="button">
                                                <i class="fas fa-chart-bar me-1"></i>
                                            </a>
                                            Ivy IEV
                                        </div>
                                        <div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion">
                                            <div class="card-body">
                                                <p class="text-break overflow-auto" style="white-space: pre-wrap; max-height: 400px">{{ iev_out }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                          </div>
                          {% if pcap_frame_link or qlog_frame_link %}
                            <script>
                                $(function(){
                                    $('#collapse6  ul.nav > li > a').click(function() {
                                        //Remove any previous active classes
                                        console.log("click 6");
                                        $('#collapse6 .nav-item .nav-link').removeClass('active');
                                        $('#collapse6 .nav-item .nav-link').attr("aria-current", false);

                                        $(".qLogsFrame").css("display", "none");
                                        $("#qlog_"+$(this).text().toLowerCase()).css("display", "inherit");

                                        $(this).addClass('active');
                                        $(this).attr("aria-current", true);
                                    });
                                    $('#collapse7  ul.nav > li > a').click(function() {
                                        //Remove any previous active classes
                                        console.log("click 7");
                                        $('#collapse7 .nav-item .nav-link').removeClass('active');
                                        $('#collapse7 .nav-item .nav-link').attr("aria-current", false);
                                        
                                        $(".pcapFrame").css("display", "none");
                                        $("#pcap_"+$(this).text().toLowerCase()).css("display", "inherit");

                                        $(this).addClass('active');
                                        $(this).attr("aria-current", true);
                                    });
                                });
                            </script>
                          {% endif %}
                          <div class="card mb-3" id="accordion">
                            <div class="card-header" id="heading6">
                                {% if qlog_frame_link %}
                                <a class="btn btn-link collapsed" data-bs-toggle="collapse" href="#collapse6"   aria-expanded="false" aria-controls="collapse6" role="button">
                                    <i class="fas fa-chart-bar me-1"></i>
                                </a>
                                QLogs
                                {% else %}
                                <a class="btn btn-link collapsed" data-bs-toggle="collapse" aria-disabled="true" aria-expanded="false" aria-controls="collapse6" role="button">
                                    <i class="fas fa-chart-bar me-1"></i>
                                </a>
                                QLogs (not available)
                                {% endif %}
                            </div>
                            <div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
                                <ul class="nav nav-tabs">
                                    <li class="nav-item">
                                      <a class="nav-link active" aria-current="true" >Sequence</a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link" >Congestion</a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link" >Multiplexing</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" >Packetization</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" >Stats</a>
                                    </li>
                                </ul>
                                <div class="qLogsFrame" id="qlog_sequence">
                                    <iframe class="myFrame" src="{{ qlog_frame_link }}#/sequence" style="width: 100%; height: 500px" title="QLogs trace"></iframe> 
                                </div>
                                <div class="qLogsFrame" id="qlog_congestion" style="display: none">
                                    <iframe class="myFrame" src="{{ qlog_frame_link }}#/congestion" style="width: 100%; height: 500px" title="QLogs trace"></iframe> 
                                </div>
                                <div class="qLogsFrame" id="qlog_multiplexing" style="display: none">
                                    <iframe class="myFrame" src="{{ qlog_frame_link }}#/multiplexing" style="width: 100%; height: 500px" title="QLogs trace"></iframe>
                                </div>
                                <div class="qLogsFrame" id="qlog_packetization" style="display: none">
                                    <iframe class="myFrame" src="{{ qlog_frame_link }}#/packetization" style="width: 100%; height: 500px" title="QLogs trace"></iframe> 
                                </div>
                                <div class="qLogsFrame" id="qlog_stats" style="display: none">
                                    <iframe class="myFrame" src="{{ qlog_frame_link }}#/stats" style="width: 100%; height: 500px" title="QLogs trace"></iframe> 
                                </div>
                            </div>
                          </div>
                          <div class="card mb-3" id="accordion">
                            <div class="card-header" id="heading7">
                                {% if pcap_frame_link %}
                                <a class="btn btn-link collapsed" data-bs-toggle="collapse" href="#collapse7"  aria-expanded="false" aria-controls="collapse7" role="button">
                                    <i class="fas fa-chart-bar me-1"></i>
                                </a>
                                PCAP trace 
                                {% else %}
                                <a class="btn btn-link collapsed" data-bs-toggle="collapse" aria-disabled="true" aria-expanded="false" aria-controls="collapse7" role="button">
                                    <i class="fas fa-chart-bar me-1"></i>
                                </a>
                                PCAP trace (not available)
                                {% endif %}
                            </div>
                            <div id="collapse7" class="collapse" aria-labelledby="heading7" data-parent="#accordion">
                                <ul class="nav nav-tabs">
                                    <li class="nav-item">
                                      <a class="nav-link active" aria-current="true" >Sequence</a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link" >Congestion</a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link" >Multiplexing</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" >Packetization</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" >Stats</a>
                                    </li>
                                </ul>
                                <div class="pcapFrame" id="pcap_sequence">
                                    <iframe  class="myFrame" src="{{ pcap_frame_link }}#/sequence" style="width: 100%; height: 500px" title="PCAP trace"></iframe> 
                                </div>
                                <div class="pcapFrame" id="pcap_congestion" style="display: none">
                                    <iframe class="myFrame" src="{{ pcap_frame_link }}#/congestion" style="width: 100%; height: 500px" title="PCAP trace"></iframe> 
                                </div>
                                <div class="pcapFrame" id="pcap_multiplexing" style="display: none">
                                    <iframe class="myFrame" src="{{ pcap_frame_link }}#/multiplexing" style="width: 100%; height: 500px" title="PCAP trace"></iframe> 
                                </div>
                                <div class="pcapFrame" id="pcap_packetization" style="display: none">
                                    <iframe class="myFrame" src="{{ pcap_frame_link }}#/packetization" style="width: 100%; height: 500px" title="PCAP trace"></iframe> 
                                </div>
                                <div class="pcapFrame" id="pcap_stats" style="display: none">
                                    <iframe class="myFrame" src="{{ pcap_frame_link }}#/stats" style="width: 100%; height: 500px" title="PCAP trace"></iframe> 
                                </div>
                                
                            </div>
                          </div>
                    </div>
                    <footer class="py-4 bg-light mt-auto">
                        <div class="container-fluid px-4">
                            <div class="d-flex align-items-center justify-content-between small">
                                <div class="text-muted">Copyright &copy; QUIC Ivy 2022 - Christophe Crochet</div>
                                <div>
                                    <a href="#">Privacy Policy</a>
                                    &middot;
                                    <a href="#">Terms &amp; Conditions</a>
                                </div>
                            </div>
                        </div>
                    </footer>
                </main>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="/static/js/scripts.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
        <script src="/static/assets/demo/chart-area-demo.js"></script>
        <script src="/static/assets/demo/chart-bar-demo.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
        <script src="/static/js/datatables-simple-demo.js"></script>
    </body>
</html>
