<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style>
        textarea {
            font-family: monospace;
            box-sizing: border-box;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <h2 class="text-capitalize">{{ title }}</h2>
                <p class='attribute'><strong>Start Time: </strong>{{ header_info.start_time.strftime("%Y-%m-%d %H:%M:%S") }}</p>
                <p class='attribute'><strong>Duration: </strong>{{ header_info.status.duration }}</p>
                <p class='attribute'><strong>Summary: </strong>Total: {{ header_info.status.total }}, <input type="checkbox" id="showPassed" checked>Pass: {{ header_info.status.success }}{% if header_info.status.failure %}, <input type="checkbox" id="showFailed" checked>Fail: {{ header_info.status.failure }}{% endif %}{% if header_info.status.error %}, <input type="checkbox" id="showErrors" checked>Error: {{ header_info.status.error }}{% endif %}{% if header_info.status.skip %}, <input type="checkbox" id="showSkipped" checked>Skip: {{ header_info.status.skip }}{% endif %}</p>
            </div>
        </div>
        {%- for test_case_name, tests_results in all_results|dictsort %}
        {%- if tests_results %}
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-md-10">
                <table class='table table-hover table-responsive'>
                    <thead>
                        <tr>
                            <th>{{ test_case_name }}</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {%- for test_case in tests_results %}
                        {%- if not test_case.subtests is defined %}
                        <tr class='{{ status_tags[test_case.outcome] }}' style="display: table-row;">
                            <td class="col-xs-10">{{ test_case.test_id.split(".")[-1] }}</td>
                            <td class="col-xs-1">
                                <span class="label label-{{ status_tags[test_case.outcome] }}" style="display:block;width:40px;">
                                    {%- if test_case.outcome == test_case.SUCCESS -%}
                                        Pass
                                    {%- elif test_case.outcome == test_case.SKIP -%}
                                        Skip
                                    {%- elif test_case.outcome == test_case.FAILURE -%}
                                        Fail
                                    {%- else -%}
                                        Error
                                    {%- endif -%}
                                </span>
                            </td>
                            <td class="col-xs-1">
                                {%- if (test_case.stdout or test_case.err) %}
                                <button class="btn btn-default btn-xs">View</button>
                                {%- endif %}
                            </td>
                        </tr>
                        {%- if (test_case.stdout or test_case.err or test_case.err) and test_case.outcome != test_case.SKIP %}
                        <tr style="display:none;">
                            <td class="col-xs-9" colspan="3">
                                <textarea rows="40" readonly>
                                    {%- if test_case.stdout %}{{ test_case.stdout|e }}{% endif %}
                                </textarea>
                                {%- if test_case.err %}<p style="color:maroon;">{{ test_case.err[0].__name__ }}: {{ test_case.err[1] }}</p>{% endif %}
                            </td>
                        </tr>
                        {%- endif %}
                        {%- if (test_case.stdout or test_case.err or test_case.err) and test_case.outcome == test_case.SKIP %}
                        <tr style="display:none;">
                            <td class="col-xs-9" colspan="3">
                                <textarea rows="40" readonly>
                                    {%- if test_case.stdout %}{{ test_case.stdout|e }}{% endif %}
                                </textarea>
                                {%- if test_case.err %}<p style="color:maroon;">{{ test_case.err }}</p>{% endif %}
                            </td>
                        </tr>
                        {%- endif %}
                        {%- else %}
                        <tr class='{{ status_tags[test_case.outcome] }}'>
                            <td class="col-xs-10">{{ test_case.test_id.split(".")[-1] }}</td>
                            <td class="col-xs-1">
                                <span class="label label-{{ status_tags[test_case.outcome] }}" style="display:block;width:40px;">
                                    {%- if test_case.outcome == test_case.SUCCESS -%}
                                        Pass
                                    {%- else -%}
                                        Fail
                                    {%- endif -%}
                                </span>
                            </td>
                            <td class="col-xs-1">
                                {%- if test_case.subtests %}
                                <button class="btn btn-default btn-xs">View</button>
                                {%- endif %}
                            </td>
                        </tr>
                        {%- if test_case.subtests %}
                        <tr style="display:none;">
                            <td colspan="3">

                                <table class='table table-hover table-responsive'>
                                    <tbody>
                                        {%- for subtest in test_case.subtests %}
                                        <tr class='{{ status_tags[subtest.outcome] }}'>
                                            <td class="col-xs-10">{{ subtest.test_id.split(".")[-1] }}</td>
                                            <td class="col-xs-1">
                                                <span class="label label-{{ status_tags[subtest.outcome] }}" style="display:block;width:40px;">
                                                {%- if subtest.outcome == subtest.SUCCESS -%}
                                                    Pass
                                                {%- else -%}
                                                    Fail
                                                {%- endif -%}
                                                </span>
                                            </td>
                                            <td class="col-xs-1">
                                                {%- if subtest.err %}
                                                <button class="btn btn-default btn-xs">View</button>
                                                {%- endif %}
                                            </td>
                                        </tr>
                                        {%- if subtest.err or subtest.err %}
                                        <tr style="display:none;">
                                            <td class="col-xs-9" colspan="3">
                                                <textarea rows="40" readonly>
                                                    {%- if subtest.err %}{{ subtest.err[0].__name__ }}: {{ subtest.err[1] }}{% endif %}
                                                </textarea>
                                                    {%- if subtest.err %}<p style="color:maroon;">{{ subtest.test_exception_info }}</p>{% endif %}
                                            </td>
                                        </tr>
                                        {%- endif %}
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        {%- endif %}
                        {%- endif %}
                        {%- endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {%- endif %}
        {%- endfor %}
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('td').on('click', '.btn', function(e){
                e.preventDefault();
                e.stopImmediatePropagation();
                var $this = $(this);
                var $nextRow = $this.closest('tr').next('tr');
                $nextRow.slideToggle("fast");
                $this.text(function(i, text){
                    if (text === 'View') {
                        return 'Hide';
                    } else {
                        return 'View';
                    };
                });
            });

            function hideOrShow(){
                $("table").each(function(){
                    if ($(this).children("tbody").children("tr.success[style*='display: table-row'], tr.danger[style*='display: table-row'], tr.warning[style*='display: table-row'], tr.info[style*='display: table-row']").length ==0){
                        $(this).hide()
                    } else {
                        $(this).show()
                    }

                    $(this).find(".btn").each(function(){
                            $(this).text("View")
                    });
                });
            }
            $('#showPassed').on('click', function(){
                $(".success").toggle(this.checked);
                hideOrShow()
            });
            $('#showFailed').on('click', function(){
                $(".danger").toggle(this.checked);
                hideOrShow()
            });
            $('#showErrors').on('click', function(){
                $(".warning").toggle(this.checked);
                hideOrShow()
            });
            $('#showSkipped').on('click', function(){
                $(".info").toggle(this.checked);
                hideOrShow()
            });
        });
    </script>
</body>
</html>