<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ page_title }}</title>
        <link rel="icon" href="https://www.wiliot.com/favicon.ico" type="image/x-icon" />
        <!-- JQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- DataTables -->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />
        <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
    
        <style>
            #card-body {
                height: auto;
                overflow:auto; 
            }
            .pass {
                color: green;
            }
            .inconclusive {
                color: rgb(160, 160, 2);
            }
            .fail {
                color: red;
            }

        </style>
        <title>{{ title }}</title>
    </head>
    <body>
    <br>
    <div class="text-center">
        <img src="https://www.wiliot.com/src/img/svg/logo.svg" class="img-fluid" alt="">
    </div>
    <br>
        <div class="container">
            <h1> GW Certificate | version {{version}} | {{ gw_id }} | {{ datetime }}</h1>
            <div class="card">
                <div class="card-header">
                    Tests Summary
                </div>
                <div class="card-body" id="card-body">
                    <div class="test-list">
                        {% for test in tests %}
                        <div class="test">
                            <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="right" title="{{ test.test_tooltip }}">
                                {% if test.result_indication == 'info' %}
                                    <h5>{{ test.test_name }}: {% if test.test_pass >= test.pass_min %}<span class="badge bg-info text-dark">Info</span>{% else %}<span class="badge bg-warning text-dark">Warning</span>{% endif %}</h5>
                                {% else %}
                                    <h5>{{ test.test_name }}: {% if test.test_pass >= test.pass_min %}<span class="badge bg-success">Pass</span>{% elif test.test_pass >= test.inconclusive_min %}<span class="badge bg-warning text-dark">Inconclusive</span>{% else %}<span class="badge bg-danger">Fail</span>{% endif %}</h5>
                                {% endif %}
                            </span>
                            <br>
                                {% for stage in test.stages %}
                                    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="right" title="{{ stage.stage_tooltip }}" >
                                        {% if stage.result_indication == 'info' %}
                                            <h6> - {{ stage.stage_name }}: {% if stage.stage_pass >= stage.pass_min %}<span class="badge bg-info text-dark">Info</span>{% else %}<span class="badge bg-warning text-dark">Warning</span>{% endif %} </h6> 
                                        {% else %}
                                            <h6> - {{ stage.stage_name }}: {% if stage.stage_pass >= stage.pass_min %}<span class="badge bg-success">Pass</span>{% elif stage.stage_pass >= stage.inconclusive_min %}<span class="badge bg-warning text-dark">Inconclusive</span>{% else %}<span class="badge bg-danger">Fail</span>{% endif %} </h6>
                                        {% endif %}
                                    </span>
                                    <br>
                                {% endfor %}
                        </div>
                        {% endfor %}
                    </div>
                    <i> <sub>Hover over each line for a brief explainer </sub> </i>
                </div>
            </div>
        </div>
    <br>
    <div class="container">
    {% for test in tests %}
    <div class="accordion" id="accordion{{ loop.index }}">
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading{{ loop.index }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="false" aria-controls="collapse{{ loop.index }}">
                    {% if test.result_indication == 'info' %}
                        {{ test.test_name }}:&nbsp; {% if test.test_pass >= test.pass_min %}<span class="badge bg-info text-dark">Info</span>{% else %}<span class="badge bg-warning text-dark">Warning</span>{% endif %}
                    {% else %}
                        {{ test.test_name }}:&nbsp; {% if test.test_pass >= test.pass_min %}<span class="badge bg-success">Pass</span>{% elif test.test_pass >= test.inconclusive_min %}<span class="badge bg-warning text-dark">Inconclusive</span>{% else %}<span class="badge bg-danger">Fail</span>{% endif %}
                    {% endif %}
                </button>
            </h2>
            <div id="collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ loop.index }}" data-bs-parent="#accordion{{ loop.index }}">
                <div class="accordion-body">
                    {{ test.report_html }}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    <div class="accordion" id="accordion_log">
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading_log">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_log" aria-expanded="false" aria-controls="collapse_log">
                        GW Certificate Log
                    </button>
                </h2>
                <div id="collapse_log" class="accordion-collapse collapse" aria-labelledby="heading_log" data-bs-parent="#accordion_log">
                    <div class="accordion-body">
                        <div class="container">
                            <div class="card">
                                <div class="card-header">
                                    GW Certificate Log
                                </div>
                                <div class="card-body" id="card-body" style="height: 500px; overflow: auto">
                                    <samp>
                                        {% for line in log %}
                                        {{ line | safe}}<br />
                                        {% endfor %}
                                    </samp>
                                </div>
                            </div>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion" id="accordion_mqtt_log">
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading_mqtt_log">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_mqtt_log" aria-expanded="false" aria-controls="collapse_mqtt_log">
                        MQTT Log
                    </button>
                </h2>
                <div id="collapse_mqtt_log" class="accordion-collapse collapse" aria-labelledby="heading_mqtt_log" data-bs-parent="#accordion_log">
                    <div class="accordion-body">
                        <div class="container">
                            <div class="card">
                                <div class="card-header">
                                    MQTT Log
                                </div>
                                <div class="card-body" id="card-body" style="height: 500px; overflow: auto">
                                    <samp>
                                        {% for line in mqtt_log %}
                                        {{ line | safe}}<br />
                                        {% endfor %}
                                    </samp>
                                </div>
                            </div>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    <div class="accordion" id="accordion_sniffer_log">
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading_sniffer_log">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_sniffer_log" aria-expanded="false" aria-controls="collapse_sniffer_log">
                    Sniffer Log
                </button>
            </h2>
            <div id="collapse_sniffer_log" class="accordion-collapse collapse" aria-labelledby="heading_sniffer_log" data-bs-parent="#accordion_log">
                <div class="accordion-body">
                    <div class="container">
                        <div class="card">
                            <div class="card-header">
                                Sniffer Log
                            </div>
                            <div class="card-body" id="card-body" style="height: 500px; overflow: auto">
                                <samp>
                                    {% for line in sniffer_log %}
                                    {{ line | safe}}<br />
                                    {% endfor %}
                                </samp>
                            </div>
                        </div>
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </div>

    <!-- <br>
    <div class="text-center">
        <br>
        <h6>Certified Partners</h6>
    </div>
    <div id="certifiedPartnersCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-interval="10000">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="row d-flex flex-wrap align-items-center" style="height: 50px;">
                    <img src="https://www.wiliot.com/src/uploads/_partnersListingLogo/Screenshot-2024-07-08-at-9.36.37-AM.png" class="d-block mx-auto" style="width: 120px;" alt="Image missing">
                </div>
            </div>
            <div class="carousel-item">
                <div class="row d-flex flex-wrap align-items-center" style="height: 50px;">
                    <img src="https://www.wiliot.com/src/uploads/_partnersListingLogo/rigado.png" class="d-block mx-auto" style="width: 120px;" alt="Image missing">
                </div>
            </div>
            <div class="carousel-item">
                <div class="row d-flex flex-wrap align-items-center" style="height: 50px;">
                    <img src="https://www.minew.com/wp-content/uploads/2024/06/mine-logo-black.png" class="d-block mx-auto" style="width: 120px;" alt="Image missing">
                </div>
            </div>
        </div>
    </div>
    <br> -->

<!-- Accordion listener to adjust table -->
<script defer type="text/javascript">
    var accordions = document.getElementsByClassName('accordion')
    Array.prototype.forEach.call(accordions, (el) => {
        el.addEventListener('shown.bs.collapse', function () {
            DataTable.tables({ visible: true, api: true }).columns.adjust();
        });
    });
    </script>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
<script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>
    <style>
        .tooltip-inner {
            max-width: 1000px;
            /* width: 570px; */
            font-size:larger;
        }
    </style>
</body>
</html>
