<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>{{ html_title }}</title>
    <meta name="author" content="Oleksii Skliarov, Ivan Lysenko"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css" media="screen">
        body        { font-family: verdana, arial, helvetica, sans-serif; font-size: 80%; }
        table       { font-size: 100%; }
        pre         { }

        /* -- heading ---------------------------------------------------------------------- */
        h1 {
            font-size: 16pt;
            color: gray;
        }
        .heading {
            margin-top: 0ex;
            margin-bottom: 1ex;
        }

        .heading .attribute {
            margin-top: 1ex;
            margin-bottom: 0;
        }

        .heading .description {
            margin-top: 4ex;
            margin-bottom: 6ex;
        }

        /* -- css div popup ------------------------------------------------------------------------ */
        a.popup_link {
        }

        a.popup_link:hover {
            color: red;
        }

        .popup_window {
            display: none;
            position: relative;
            left: 0px;
            top: 0px;
            /*border: solid #627173 1px; */
            padding: 8px;
            background-color: #E6E6D6;
            font-family: "Lucida Console", "Courier New", Courier, monospace;
            text-align: left;
            font-size: 8pt;
            width: 570px;
        }

        }
        /* -- report ------------------------------------------------------------------------ */
        #show_detail_line {
            margin-top: 3ex;
            margin-bottom: 1ex;
        }
        .result_table {
            width: 80%;
            border-collapse: collapse;
            border: 1px solid #777;
        }
        #header_row {
            font-weight: bold;
            color: white;
            background-color: #777;
        }
        .result_table td {
            border: 1px solid #777;
            padding: 2px;
        }
        .shortDescription {
            font-style: italic;
            font-weight: normal;
        }
        #total_row  { font-weight: bold; }
        .passClass  { background-color: #6c6; }
        .failClass  { background-color: #c60; }
        .errorClass { background-color: #c00; }
        .passCase   { color: #6c6; }
        .failCase   { color: #c60; font-weight: bold; }
        .errorCase  { color: #c00; font-weight: bold; }
        .hiddenRow  { display: none; }
        
        .testcase   { display: none; }
		.testclass.active ~ .testcase { display: table-row; }

        /* -- ending ---------------------------------------------------------------------- */
        #ending {
        }

    </style>
</head>
<div class='heading'>
    <h1>{{ html_title }}</h1>
    <p class='attribute'><strong>Start Time:</strong> {{ start_time }}</p>
    <p class='attribute'><strong>Duration:</strong> {{ duration }}</p>
    <p class='attribute'><strong>Status:</strong> 
        Total: {{ stats.total }} 
        Pass: {{ stats.passes }} 
        Skip: {{ stats.skipped }} 
        Failures: {{ stats.failures }} 
        Errors: {{ stats.errors}} 
    </p>
</div>
<body>
<script language="javascript" type="text/javascript">
output_list = Array();

/* level - 0:Summary; 1:Failed; 2:All */
function showCase(level) {
    trs = document.getElementsByClassName("testclass");
    for (var i = 0; i < trs.length; i++) {
        tr = trs[i];
        if(0==level && tr.className.indexOf("active") != -1){
			tr.className = tr.className.replace("active", "").replace("  ", " ").trim();
		}else if (2 == level && tr.className.indexOf("active") == -1){
			tr.className+=" active";
		}else if (1 == level){
			if(tr.className.indexOf("passClass") != -1){
				if(tr.className.indexOf("active") != -1){
					tr.className = tr.className.replace("active", "").replace("  ", " ").trim();
				}
			}else if (tr.className.indexOf("active") == -1){
				tr.className+=" active";
			}
        }
    }
}

function showClassDetail(element) {
    var currentClassValue = element.className || "";
      
    if (currentClassValue.indexOf("active") == -1) {
		currentClassValue += " active";
    } else {
		currentClassValue = currentClassValue.replace("active", "").replace("  ", " ");
	}
	element.className = currentClassValue.trim();
}


function showTestDetail(div_id){
    var details_div = document.getElementById(div_id)
    var displayState = details_div.style.display
    // alert(displayState)
    if (displayState != 'block' ) {
        displayState = 'block'
        details_div.style.display = 'block'
    }
    else {
        details_div.style.display = 'none'
    }
}

function togleClass(element, clas){
        var currentClassValue = element.className || "";

        if (currentClassValue.indexOf(clas) == -1) {
            currentClassValue += " "+clas;
        } else {
            currentClassValue = currentClassValue.replace(clas, "").replace("  ", " ");
        }
        element.className = currentClassValue.trim()
    }

function showRawLog(element){
        togleClass(element, "popup_window")
    }

function html_escape(s) {
    s = s.replace(/&/g,'&amp;');
    s = s.replace(/</g,'&lt;');
    s = s.replace(/>/g,'&gt;');
    return s;
}

</script>

<!-- uncomment it if like extra header
<table>
    <tr id="header_row">
        <th>Class</th>
        <th>Fail</th>
        <th>Error</th>
        <th>Skip</th>
        <th>Success</th>
        <th>Total</th>
    </tr>
    {% for class, group in report.items() %}
        <tr>
            <td>{{ class }}</td>
            <td>{{ group.stats.failures }}</td>
            <td>{{ group.stats.errors   }}</td>
            <td>{{ group.stats.skipped  }}</td>
            <td>{{ group.stats.passes   }}</td>
            <td>{{ group.stats.total    }}</td>
        </tr>
    {% endfor %}
    <tr>
        <td><strong>Total</strong></td>
        <td>{{ stats.failures }}</td>
        <td>{{ stats.errors   }}</td>
        <td>{{ stats.skipped  }}</td>
        <td>{{ stats.passes   }}</td>
        <td>{{ stats.total    }}</td>
    </tr>
</table>
-->

<!-- test list -->
<!-- header -->
<p id='show_detail_line'>Show
<a href='javascript:showCase(0)'>Summary</a>
<a href='javascript:showCase(1)'>Failed</a>
<a href='javascript:showCase(2)'>All</a>
</p>
<table class='result_table'>
    <colgroup>
        <col align='left' width="50%" />
        <col align='right' width="10%"/>
        <col align='right' width="10%"/>
        <col align='right' width="10%"/>
        <col align='right' width="10%"/>
        <col align='right' width="10%"/>
    </colgroup>
    <tr id='header_row'>
        <td>Test Group/Test case</td>
        <td>Count</td>
        <td>Pass</td>
        <td>Fail</td>
        <td>Error</td>
        <td>View</td>
    </tr>
</table>    
<!-- for every test suite -->
{% for class, group in report.items() %}
    {% set class_count = group.stats.failures + group.stats.errors + group.stats.passes + group.stats.skipped %}
    {% if group.stats.failures %}
        {% set class_status="Fail" %}
    {% elif group.stats.errors %}
        {% set class_status="Error" %}
    {% else %}
        {% set class_status="Pass" %}
    {%- endif %}
    <table class='result_table'>
	    <colgroup>
            <col align='left' width="50%" />
            <col align='right' width="10%"/>
            <col align='right' width="10%"/>
            <col align='right' width="10%"/>
            <col align='right' width="10%"/>
            <col align='right' width="10%"/>
        </colgroup>
            {% if group.stats.errors or group.stats.failures %}
                <tr class='testclass {{ class_status.lower() }}Class active'>
            {% else %}
                <tr class='testclass {{ class_status.lower() }}Class'>
            {% endif %}
            <td>{{ class }}</td>
            <td>{{ group.stats.total }}</td>
            <td>{{ group.stats.passes }}</td>
            <td>{{ group.stats.failures }}</td>
            <td>{{ group.stats.errors }}</td>
            <td><a href="javascript:void(0)" onclick="showClassDetail(this.parentNode.parentNode)">Detail</a></td>
        </tr>    
        <!-- for every test -->
    {% for test in group.tests %}
        {% if not test.failed %}
            {% set test_status="Pass" %}
        {% elif test.type == "errors" %}
            {% set test_status="Error" %}
        {% elif test.failed and test.type == 'skipped' %}
            {% set test_status="Skip" %}
        {% elif test.failed and test.type != 'skipped' %}
            {% set test_status="Fail" %}
        {%- else -%}
            {% set test_status="Error" %}
        {%- endif %}
        {%- set description = test.shortDescription -%}

        <tr id='{{ class + test.name }}' class='testcase'>
            <td class="{{ test_status.lower() }}Case">
                {{ test.name }}
                {% if test.shortDescription %}
                    <div class="shortDescription">
                        {{ test.shortDescription }}
                    </div>
                {% endif %}
            </td>
            <td>{{ test.time }}</td>
            <td colspan='4' align='center'>
            <!--css div popup start-->
            <a class="popup_link" onfocus='this.blur();' href="javascript:showTestDetail('div_{{ class + test.name }}')" >
                {{ test_status }}
            </a>
            {% if test.type == "errors" or test.type == "failures" %}
                <div id='div_{{ class + test.name }}' class="popup_window" style="display: block;">
            {% else %}
                <div id='div_{{ class + test.name }}' class="popup_window" style="display: none;">
            {% endif %}
                <div style='text-align: right; color:red; cursor:pointer;'>
                <a onfocus='this.blur();' onclick="document.getElementById('div_{{ class + test.name }}').style.display = 'none' " >
                   [x]</a>
                </div>
                <pre>{{ test.stdout}}
{{ test.message }}
{{ test.tb }}
                </pre>
            </div>
            <!--css div popup end-->

            </td>
        </tr>
        {%- endfor -%}            
    {%- endfor -%}
    </table>
    <table class='result_table'>
        <colgroup>
            <col align='left' width="50%"/>
            <col align='right' width="10%" id="results_count"/>
            <col align='right' width="10%" id="results_passed"/>
            <col align='right' width="10%" id="results_failed"/>
            <col align='right' width="10%" id="results_errors"/>
            <col align='right' width="10%"/>
        </colgroup>
        <!-- test list end -->
        <tr id='total_row'>
            <td>Total</td>
            <td>{{ stats.total    }}</td>
            <td>{{ stats.passes   }}</td>
            <td>{{ stats.failures }}</td>
            <td>{{ stats.errors   }}</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <br/>
    </div>
</body>
</html>
