<!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" />
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
    
        <style>
            #card-body {
                height: auto;
                overflow:auto; 
            }
            .pass {
                color: green;
            }
            .fail {
                color: red;
            }

        </style>
        <title>{{ title }}</title>
    </head>
    <body>
    <br>
        <div class="container">
            <h1> GW Certificate | {{ 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">
                            <h5>{{ test.test_name }}: {% if test.test_pass %}<span class="pass">Pass</span>{% else %}<span class="fail">Fail</span>{% endif %}</h5>
                                {% for stage in test.stages %}
                                    <h6> - {{ stage.stage_name }}: {% if stage.stage_pass %}<span class="pass">Pass</span>{% else %}<span class="fail">Fail</span>{% endif %} </h6>
                                {% endfor %}
                        </div>
                        {% endfor %}
                    </div>
                </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 }}">
                    Test {{ test.test_name }}:&nbsp; {% if test.test_pass %}<sסpan class="pass">Pass</span>{% else %}<span class="fail">Fail</span>{% 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>

<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>
</body>
</html>
