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

<head>
    <title>{{ title }}</title>
    <!-- Bootstrap 5 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- custom css -->
    <style>
        .popup_window {
            display: none;
            /* position: relative; */
            /* left: 0; */
            /* top: 0; */
            /* border: solid #627173 1px; */
            padding: 10px;
            background-color: #E6E6D6;
            font-family: "Lucida Console", "Courier New", Courier, monospace;
            text-align: left;
            font-size: 8pt;
            width: 500px;
            margin: 8px auto;
        }

        #show_detail_line {
            margin-top: 3ex;
            margin-bottom: 1ex;
        }

        #total_row {
            font-weight: bold;
        }

        .testcase {
            margin-left: 2em;
        }
    </style>
</head>

<body>
<div class="container">
    <!-- Heading -->
    <div class='mt-3'>
        <h2 class='text-uppercase'>{{ title }}</h2>
        {% if description %}
            <p class="fst-italic">{{ description }}</p>
        {% endif %}
        <hr>
        <p>
            <strong>Start time:</strong>
            <span>{{ start_time.strftime("%Y-%m-%d, %H:%M:%S") }}</span>
        </p>
        <p>
            <strong>Duration:</strong>
            <span>{{ stop_time - start_time }}</span>
        </p>
        <p>
            <strong>Status:</strong>
            <span>Total: {{ result.total_count() }}</span>
            {% if result.success_count %}
                <span>&#8212; Pass: {{ result.pass_count }}</span>
            {% endif %}
            {% if result.failure_count %}
                <span>&#8212; Fail: {{ result.fail_count }}</span>
            {% endif %}
            {% if result.error_count %}
                <span>&#8212; Error: {{ result.error_count }}</span>
            {% endif %}
            {% if result.skip_count %}
                <span>&#8212; Skip: {{ result.skip_count }}</span>
            {% endif %}
        </p>
    </div>

    <!-- Report -->
    <hr>
    <p id='show_detail_line'>
        <strong>Show:</strong>
        <a href='javascript:showCase(0)' class="btn btn-sm btn-outline-primary">Summary</a>
        <a href='javascript:showCase(1)' class="btn btn-sm btn-outline-danger">Failed</a>
        <a href='javascript:showCase(2)' class="btn btn-sm btn-outline-primary">All</a>
    </p>
    <table id='result_table' class='table table-sm table-hover table-responsive'>
        <thead id='header_row'>
        <tr>
            <th>Test Group/Test case</th>
            <th>Count</th>
            <th>Pass</th>
            <th>Fail</th>
            <th>Error</th>
            <th>Skip</th>
            <th>View</th>
        </tr>
        </thead>
        {% for test_group in test_groups %}
            <tr class="fw-bold">
                <td>{{ test_group.desc }}</td>
                <th>{{ test_group.total_count() }}</th>
                <th>{{ test_group.pass_count }}</th>
                <th>{{ test_group.fail_count }}</th>
                <th>{{ test_group.error_count }}</th>
                <th>{{ test_group.skip_count }}</th>
                <td><a href="javascript:showClassDetail('{{ test_group.cid }}', '{{ test_group.total_count() }}')"
                       class="text-decoration-none">Detail</a>
                </td>
            </tr>

            {% for test_case in test_group.test_cases %}
                <tr id='{{ test_case.tid }}' class="{% if test_case.status == test_case.status.PASS %}
                table-success
                {% elif test_case.status == test_case.status.FAIL %}
                table-danger
                {% elif test_case.status == test_case.status.ERROR %}
                table-warning
                {% elif test_case.status == test_case.status.SKIP %}
                table-secondary
                {% endif %}">
                    <td>
                        <div class='testcase'>{{ test_case.desc }}</div>
                    </td>

                    <td colspan='6' class="text-center">
                        <!--css div popup start-->
                        {% if test_case.detail %}
                            <a class="popup_link badge text-decoration-none{% if test_case.status == test_case.status.FAIL %}
                            bg-danger text-black
                            {% elif test_case.status == test_case.status.ERROR %}
                            bg-warning text-black
                            {% elif test_case.status == test_case.status.SKIP %}
                            bg-light text-dark
                            {% endif %}" onfocus='this.blur();'
                               href="javascript:showTestDetail('div_{{ test_case.tid }}')">{{ test_case.status.name | lower }}</a>

                            <div id='div_{{ test_case.tid }}' class="popup_window">
                                <div style='text-align: right; color:red;cursor:pointer'>
                                    <a onfocus='this.blur();'
                                       onclick="document.getElementById('div_{{ test_case.tid }}').style.display = 'none';">
                                        [x]
                                    </a>
                                </div>
                                <pre>{{ test_case.detail }}</pre>
                            </div>
                            <!--css div popup end-->
                        {% else %}
                            <span class='badge {% if test_case.status == test_case.status.PASS %}
                            bg-success text-white
                            {% elif test_case.status == test_case.status.SKIP %}
                            bg-light text-dark>
                        {% endif %}'>{{ test_case.status.name | lower }}</span>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}

        {% endfor %}
        <tr id=' total_row'>
            <td>Total</td>
            <td>{{ result.total_count() }}</td>
            <td>{{ result.pass_count }}</td>
            <td>{{ result.fail_count }}</td>
            <td>{{ result.error_count }}</td>
            <td>{{ result.skip_count }}</td>
            <td>&nbsp;</td>
        </tr>
    </table>

    <!-- Ending -->

</div>

<script type="text/javascript">
    output_list = Array();

    /* level - 0:Summary; 1:Failed; 2:All */
    function showCase(level) {
        let trs = document.getElementsByTagName("tr");
        for (let i = 0; i < trs.length; i++) {
            let tr = trs[i];
            let id = tr.id;

            let id_prefix = id.substring(0, 2);

            if (id_prefix === 'ft' || id_prefix === 'et') {
                if (level < 1) {
                    tr.classList.add('d-none');
                } else {
                    tr.classList.remove('d-none');
                }
            }
            if (id_prefix === 'pt' || id_prefix === 'st') {
                if (level > 1) {
                    tr.classList.remove('d-none');
                } else {
                    tr.classList.add('d-none');
                }
            }
        }
    }


    function showClassDetail(cid, count) {
        let id_list = Array(count);
        let toHide = 1;
        for (let i = 0; i < count; i++) {
            let tid0 = 't' + cid.substring(1) + '.' + (i + 1);
            let tid = 'f' + tid0;
            let tr = document.getElementById(tid);
            if (!tr) {
                tid = 'p' + tid0;
                tr = document.getElementById(tid);
            }
            id_list[i] = tid;
            if (tr.classList.contains('d-none')) {
                toHide = 0;
            }
        }
        for (let i = 0; i < count; i++) {
            let tid = id_list[i];
            if (toHide) {
                document.getElementById(tid).classList.add('d-none');
            } else {
                document.getElementById(tid).classList.remove('d-none');
            }
        }
    }


    function showTestDetail(div_id) {
        let details_div = document.getElementById(div_id)
        let displayState = details_div.style.display
        if (displayState !== 'block') {
            details_div.style.display = 'block'
        } else {
            details_div.style.display = 'none'
        }
    }
</script>

<script type="text/javascript">
    showCase(2);
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>


</body>

</html>