{% load static %}
{% load mathfilters %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test-Report</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="test-results.css" type="text/css" />
    </head>
    <body>
        <div>
            <h2>Test Results</h2>
            <div class="div-summary">
                <table class="table-summary">
                    <tr>
                        <th>Timestamp:</th>
                        <td>{{ summary.timestamp }}</td>
                    </tr>
                    <tr>
                        <th>Duration:</th>
                        <td>{{ summary.duration.total_seconds }}s</td>
                    </tr>
                    <tr>
                        <th>Number of tests:</th>
                        <td>{{ summary.totals }}</td>
                    </tr>
                    <tr>
                        <th>Skipped:</th>
                        <td>{{ summary.skipped }}</td>
                    </tr>
                    <tr>
                        <th>Passed:</th>
                        <td>{{ summary.passed }}</td>
                    </tr>
                    <tr>
                        <th>Precondition Failures:</th>
                        <td>{{ summary.precondition_failure }}</td>
                    </tr>
                    <tr>
                        <th>Failures:</th>
                        <td>{{ summary.failure }}</td>
                    </tr>
                    <tr>
                        <th>Expected Failures:</th>
                        <td>{{ summary.expected_failure }}</td>
                    </tr>
                    <tr>
                        <th>Unexpected Successes:</th>
                        <td>{{ summary.unexpected_success }}</td>
                    </tr>
                    <tr>
                        <th>Errors:</th>
                        <td>{{ summary.error }}</td>
                    </tr>
                </table>
            </div>
            <div class="container" width="50%">
                {% for testcase, testcase_results in testcases.items %}
                    <div>
                        <table id="testclass" class="table-testclass">
                        <thead>
                            <tr class="test">
                                <th class="col-class-name" align="left">{{ testcase }}</th>
                                <th class="col-duration">Duration</th>
                                <th class="col-result">Result</th>
                                <th class="col-button">
                                    <button class="btn-testclass-details">...</button>
                                </th>
                            </tr>
                            <tr>
                                <td>
                                    Skipped: {{ testcase_results.summary.skipped }} |
                                    Passed: {{ testcase_results.summary.passed }} |
                                    Precondition Failures: {{ testcase_results.summary.precondition_failure }} |
                                    Failures: {{ testcase_results.summary.failure }} |
                                    Expected Failures: {{ testcase_results.summary.expected_failure }} |
                                    Unexpected Successes: {{ testcase_results.summary.unexpected_success }} |
                                    Errors: {{ testcase_results.summary.error }}
                                </td>
                                <td class="col-duration">
                                    {{ testcase_results.summary.duration.total_seconds }}s
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                        {% for test in testcase_results.tests %}
                            <tr class="tr tr--{{ test.result }}">
                                <td class="col-class-name">{{ test.name }}</td>
                                <td class="co-duration">{{ test.duration.total_seconds }}s</td>
                                <td class="col-result"><span class="label-{{ test.result }}">{{ test.result }}</span></td>
                                <td class="col-button">
                                    {% if test.result != 'passed' %}
                                        <button class="btn-testrun-details">View</button>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr style="display: none">
                                <td class="td-testrun-outcome" colspan="4"><pre>{{ test.outcome }}</pre></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endfor %}
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('th').on('click', '.btn-testclass-details', function(e){
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var $this = $(this);
                    $(this).parents("table").find("tbody").toggle();
                    $this.text(function(i, text){
                        if (text === '...') {
                            return 'Hide';
                        } else {
                            return '...';
                        };
                    });
                });
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('td').on('click', '.btn-testrun-details', function(e){
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var $this = $(this);
                    $(this).closest("tr").next('tr').toggle();
                    $this.text(function(i, text){
                        if (text === 'View') {
                            return 'Hide';
                        } else {
                            return 'View';
                        };
                    });
                });
            });
        </script>
    </body>
</html>
