<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ suite_sum.name }}</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
        function toggleByClass(cls) {
           $('.'+cls).toggle();
        }
    </script>
    <style type="text/css">
        .hidable{
            display: none;
        }
        .fail{
            color: red;
        }
        .error{
            color: brown;
        }
        .skipped{
            color: orange;
        }
        .pass{
            color: green;
        }
		h3 {
            font-weight: bold;
        }
        caption {
            font-size: 1.5em;
        }
        table { 
            table-layout: fixed;
            word-wrap: break-word;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <h3>{{ suite_sum.name|e|safe }}</h3>
    <p>
        Generated by {{ app }}-{{ version }} at {{ date_time }}<br/>
        {{ suite_sum.description|e|nl2br|safe }}
    </p>
</div>

<div class="container-fluid">
    <table class="table table-hover">
        <caption>Summary</caption>
        <thead>
        <tr class="info">
            <th>Duration (actual)</th>
            <th>Total</th>
            <th>Pass</th>
            <th>Skipped</th>
            <th>Error</th>
            <th>Fail</th>
            <th>Rate</th>
        </tr>
        </thead>
        <tbody>
        <tr class="{{ suite_sum.category }}">
            <td>{{ suite_sum.duration }}s</td>
            <td>{{ suite_sum.run }}</td>
            <td>{{ suite_sum.passed }}</td>
            <td>{{ suite_sum.skipped }}</td>
            <td>{{ suite_sum.error }}</td>
            <td>{{ suite_sum.fail }}</td>
            <td>{{ suite_sum.rate }}</td>
        </tr>
        </tbody>
    </table>
</div>

<div class="container-fluid">
    {% for mod_sum in suite_sum.mod_sum_list %}
    <table class="table table-hover table-bordered">
        <caption>{{ mod_sum.name }}</caption>
        <thead>
        <tr class="info">
            <th style="width: 30%">Class</th>
            <th style="width: 10%">Duration (sum)</th>
            <th style="width: 10%">Total</th>
            <th style="width: 10%">Pass</th>
            <th style="width: 10%">Skipped</th>
            <th style="width: 10%">Error</th>
            <th style="width: 10%">Fail</th>
            <th style="width: 10%">Rate</th>
        </tr>
        </thead>
        <tbody>
        {% for cls_sum in mod_sum.cls_sum_list %}
        <tr id="{{ cls_sum.cid }}" class="{{ cls_sum.category }}">
            <td><a href="javascript:toggleByClass('{{ cls_sum.cid }}');">{{ cls_sum.name }}</a></td>
            <td>{{ cls_sum.duration }}s</td>
            <td>{{ cls_sum.run }}</td>
            <td>{{ cls_sum.passed }}</td>
            <td>{{ cls_sum.skipped }}</td>
            <td>{{ cls_sum.error }}</td>
            <td>{{ cls_sum.fail }}</td>
            <td>{{ cls_sum.rate }}</td>
        </tr>
        <tr class="{{ cls_sum.cid }} hidable">
            <td colspan="8">
                <table class="table">
                    {% for mth_sum in cls_sum.mth_sum_list %}
                    <tr id="{{ mth_sum.fid }}">
                        <td style="width: 70%">
                            <a href="javascript:toggleByClass('{{ mth_sum.fid }}');" class="{{ mth_sum.category }}">
                                {{ mth_sum.name }}
                            </a>
                        </td>
                        <td style="width: 10%">{{ mth_sum.duration }}s</td>
                        <td style="width: 20%" align="center" class="{{ mth_sum.category }}">
                            {{ mth_sum.status }}
                        </td>
                    </tr>
                    <tr class="{{ mth_sum.fid }} hidable active">
                        <td colspan="3">
                            {{ mth_sum.description | e | pre | safe }}
                        </td>
                    </tr>
                    <tr class="{{ mth_sum.fid }} hidable active">
                        <td colspan="1">
                            {{ mth_sum.output | e | pre | safe }}
                        </td>
                        <td colspan="2">
                            {{ mth_sum.trace_back | e | pre | safe }}
                        </td>
                    </tr>
                    {% endfor %}
                </table>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% endfor %}
</div>
</body>
</html>