<!doctype html>
<html lang="en" xmlns:margin-left="http://www.w3.org/1999/xhtml">
    <head>
        <title>{{ title }}</title>
        <meta name="generator" content="{{ generator }}"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <!-- Chart CSS -->
        <link href="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.min.css" rel="stylesheet">
        <style type="text/css" media="screen">
            {{ stylesheet }}
        </style>

        <script src="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.min.js"></script>
    </head>
    <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col" style="height: 20px;">
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <div class='heading'>
                    <h2>{{ title }}</h2>
                    {% if description %}
                        <p class='description'>{{ description }}</p>
                    {% endif %}
                    <div>
                        <p class='attribute'><strong>Start time:</strong> {{ report_summary.start_time }}</p>
                        <p class='attribute'><strong>Execution time:</strong> {{ report_summary.duration }}</p>
                        <p class='attribute'><strong>Status:</strong>
                            <span class="badge badge-success" style="background-color: rgb(51,255,0);">&nbsp;Pass: {{ report_summary.status.pass }}&nbsp;</span>
                            <span class="badge badge-danger" style="background-color: rgb(255,0,0);">&nbsp;Fail：{{ report_summary.status.fail }}&nbsp;</span>
                            <span class="badge badge-primary" style="background-color: rgb(255,236,139);">&nbsp;Error：{{ report_summary.status.error }}&nbsp;</span>
                            <span class="badge badge-secondary" style="background-color: rgb(201, 203, 207);">&nbsp;Skip：{{ report_summary.status.skip }}&nbsp;</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-4 middle-col">
                <div class="total-area">
                    <h1>{{ report_summary.suite_count }}</h1>
                    <div>Total suite</div>
                </div>

                <div class="total-area">
                    <h1>{{ report_detail.count }}</h1>
                    <div>Total case</div>
                </div>
            </div>
            <div class="col-4">
                <div style="width: 50%;">
                    <canvas id="chart-area" width="200" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <hr/>
                <p id='show_detail_line'>Display ：
                    <a href='javascript:showCase(0)'>Summary</a>
                    <a href='javascript:showCase(1)'>Fail</a>
                    <a href='javascript:showCase(2)'>Error</a>
                    <a href='javascript:showCase(3)'>Skip</a>
                    <a href='javascript:showCase(4)'>All</a>
                </p>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <table id='result_table' class="table">
                    <colgroup>
                        <col align='left' />
                        <col align='right' />
                        <col align='right' />
                        <col align='right' />
                        <col align='right' />
                        <col align='right' />
                        <col align='right' />
                    </colgroup>
                    <tr id='header_row'>
                        <td style="width: 550px;">Test Case Collection</td>
                        <td>Total case</td>
                        <td>Pass</td>
                        <td>Fail</td>
                        <td>Error</td>
                        <td>Skip</td>
                        <td>Check</td>
                    </tr>
                    {% for test in report_detail.tests %}
                    <tr class='{{ test.summary.status }}Class' type="suite" id="{{ test.summary.cid }}">
                        <td align='left' style= "margin: 6px;">{{ test.summary.desc }}</td>
                        <td>{{ test.summary.count }}</td>
                        <td>{{ test.summary.pass }}</td>
                        <td>{{ test.summary.fail }}</td>
                        <td>{{ test.summary.error }}</td>
                        <td>{{ test.summary.skip }}</td>
                        <td><a href="javascript:showClassDetail('{{ test.summary.cid }}',{{ test.summary.count }})">Details</a></td>
                    </tr>
                        {% for detail in test.detail %}
                            {% if detail.has_output %}
                                <tr id='{{ detail.tid }}' cid="{{ test.summary.cid }}" class='{% if detail.status_code==0 %}hiddenRow{% endif %}' type="case">
                                    <td class='{{ detail.status }}Case' align='left'><div class='testcase' align='left'>{{ detail.desc }}</div></td>
                                    <td colspan='6' align='center'>
                                    <!--css div popup start-->
                                    <a class="popup_link {{ detail.status }}Case" onfocus='this.blur();' href="javascript:showTestDetail('div_{{ detail.tid }}')" >
                                        {{ detail.status | upper }}</a>
                                    <div id='div_{{ detail.tid }}' class="popup_window">
                                        <div style='text-align: right; color:red;cursor:pointer'>
                                        <a onfocus='this.blur();' onclick="document.getElementById('div_{{ detail.tid }}').style.display = 'none';" >
                                           [x]</a>
                                        </div>
                                        <pre style="font-size: 14px;">
                                            {{ detail.tid }}:
                                            {{ detail.output }}
                                        </pre>
                                    </div>
                                    <!--css div popup end-->
                                    </td>
                                </tr>
                            {% else %}
                                <tr id='{{ detail.tid }}' cid="{{ test.summary.cid }}" class='{% if detail.status_code==0 %}hiddenRow{% endif %}' type="case">
                                    <td class='{{ detail.status }}Case' align='left'><div class='testcase'>{{ detail.desc }}</div></td>
                                    <td class='{{ detail.status }}Case' colspan='6' align='center'>{{ detail.status | upper }}</td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                    <tr id='total_row'>
                        <td>Total</td>
                        <td>{{ report_detail.count }}</td>
                        <td>{{ report_detail.pass }}</td>
                        <td>{{ report_detail.fail }}</td>
                        <td>{{ report_detail.error }}</td>
                        <td>{{ report_detail.skip }}</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div id='ending'>

                </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script language="javascript" type="text/javascript">
            {{ javascript }}
            (function() {
                window.chartColors = {
                    red: 'rgb(255,0,0)',
                    orange: 'rgb(255,165,0)',
                    yellow: 'rgb(255,215,0)',
                    green: 'rgb(51,255,0)',
                    blue: 'rgb(65,105,225)',
                    purple: 'rgb(255,0,255)',
                    grey: 'rgb(201, 203, 207)'
                };
                var config = {
                    type: 'doughnut',
                    data: {
                        datasets: [{
                            data: [
                                {{ report_summary.status.pass }},
                                {{ report_summary.status.fail }},
                                {{ report_summary.status.error }},
                                {{ report_summary.status.skip }},
                            ],
                            backgroundColor: [
                                window.chartColors.green,
                                window.chartColors.red,
                                window.chartColors.blue,
                                window.chartColors.grey
                            ],
                            hoverBackgroundColor: [
                                window.chartColors.green,
                                window.chartColors.red,
                                window.chartColors.blue,
                                window.chartColors.grey
                            ],
                            label: 'Dataset 1'
                        }],
                        labels: [
                            'Pass',
                            'Fail',
                            'Error',
                            'Skip',
                        ]
                    },
                    options: {
                        responsive: true,
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: 'Test Result Rate'
                        },
                        animation: {
                            animateScale: true,
                            animateRotate: true
                        }
                    }
                };
                window.onload = function() {
                    var ctx = document.getElementById('chart-area').getContext('2d');
                    window.myDoughnut = new Chart(ctx, config);
                };
            })();
        </script>
    </div>
    </body>
</html>