{%- set ns = 'com.canonical.certification::' -%}
{%- set state = manager.default_device_context.state -%}
{%- set resource_map = state.resource_map -%}
{%- set job_state_map = state.job_state_map -%}
{%- set category_map = state.category_map -%}
{%- set category_outcome_map = state.category_outcome_map -%}
{%- set resource_global_outcome = state.resource_global_outcome -%}
{%- set attachment_global_outcome = state.attachment_global_outcome -%}
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>System Testing Report</title>
        <style type="text/css">
            {%- include "jquery.mobile.min.css" -%}
        </style>
        <style type="text/css">
            {%- include "checkbox.css" -%}
        </style>
        <script type="text/javascript">
            {%- include "jquery.min.js" -%}
        </script>
        <script type="text/javascript">
            {%- include "jquery-mobile.min.js" -%}
        </script>
        <script type="text/javascript">
            {{ include_file("Chart.min.js") }}
        </script>
        <script id="popup-outside-page-script">
            /* Instantiate the popup on DOMReady, and enhance its contents */
            $(function(){
                $( "#popup-outside-page" ).enhanceWithin().popup();
            });
        </script>
    </head>
    <body>
        <div data-url="demo-intro" data-role="page" class="jqm-demos ui-page ui-page-theme-a ui-page-footer-fixed ui-page-active">
                <div data-role="header" class="jqm-header">
                    <h1>System Testing Report</h1>
                </div><!-- /header -->
            <div role="main" class="ui-content jqm-content">
                {%- if ns ~ "lsb" in resource_map %}
                <h2>Software Information</h2>
                <p>{{ resource_map[ns ~ "lsb"][0]["description"] }}</p>
                {%- endif %}
                <h2>Tests Results</h2>
                    {%- if manager.test_plans %}
                    <p>Test plan: {{ manager.test_plans[0] }}</p>
                    {%- endif %}
                    <table><tbody><tr>
                    <td><canvas id="chart-area" width="140" height="140" />
                    <td id="legendDiv" class="ui-content jqm-content" style="padding:1em"></td>
                    </tr></tbody></table>
                    <script>
                        var pieData = [
                            {%- for outcome, total in state.get_outcome_stats()|dictsort %}
                            {
                                value: {{ total }},
                                color: "{{ OUTCOME_METADATA_MAP[outcome].color_hex }}",
                                label: "{{ OUTCOME_METADATA_MAP[outcome].tr_label }}"
                            },
                            {%- endfor %}
                        ];

                        var pieOptions = {
                            {% raw %}
                            legendTemplate : 
                                '<table data-role="table" id="table0" class="ui-body-d ui-responsive">'
                                +'<tbody>'
                                +"<% for (var i=0; i<segments.length; i++){%>"
                                +"<tr><td><%=segments[i].value%></td>"
                                +"<td style=\"font-weight: bold; color:<%=segments[i].fillColor%>\">"
                                +"<%if(segments[i].label){%><%=segments[i].label%><%}%></td></tr><%}%>"
                                +"</tbody>"
                                +"</table>"
                            {% endraw %}
                        }

                        window.onload = function(){
                            var ctx = document.getElementById("chart-area").getContext("2d");
                            window.myPie = new Chart(ctx).Pie(pieData, pieOptions);
                            document.getElementById("legendDiv").innerHTML = window.myPie.generateLegend();
                        };
                        $(function(){
                            $('#expanseAll').on('click', function() {
                                $( ".openMe" ).collapsible( "expand" );
                            });
                            $('#collapseAll').on('click', function() {
                                $( ".openMe" ).collapsible( "collapse" );
                            });
                        });
                    </script>
                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a">
                            <input id="expanseAll" data-mini="true" data-inline="true" value="Expand All" type="button">
                            <input id="collapseAll" data-mini="true" data-inline="true" value="Collapse All" type="button">
                        </div>
                        <div class="ui-block-b"><input id="filterTable-input1" data-type="search"></div>
                    </fieldset>
                    {%- for cat_id, cat_name in category_map|dictsort(false, 'value') %}
                    {% set mainloop = loop %}
                    <div data-role="collapsible" data-filter="true" data-input="#filterTable-input1" class="openMe" style="margin: 0;" data-content-theme="false">
                    <h3>{{ cat_name }}<span class="ui-li-count {{ OUTCOME_METADATA_MAP[category_outcome_map[cat_id]].tr_label }}Count">{{ OUTCOME_METADATA_MAP[category_outcome_map[cat_id]].tr_label }}</span></h3>
                        <table data-role="table" id="{{ cat_id }}" data-filter="true" data-input="#filterTable-input1" class="ui-body-d ui-shadow table-stroke ui-responsive">
                            <thead>
                                <tr class="ui-bar-d">
                                </tr>
                            </thead>
                            <tbody>
                            {%- for job_id, job_state in job_state_map|dictsort if job_state.result.outcome != None and job_state.effective_category_id == cat_id and job_state.job.plugin not in ("resource", "attachment") %}
                                <tr>
                                    <td data-filtertext="{{ job_state.job.partial_id }}" style='width:35%'>{{ job_state.job.partial_id }}</td>
                                    <td style='width:10%; font-weight: bold; color: {{ job_state.result.outcome_meta().color_hex }}'>{{ job_state.result.outcome_meta().tr_label }}</td>
                                    {%- if job_state.effective_certification_status != "unspecified" %}
                                    <td style='width:10%'>{{ job_state.effective_certification_status }}</td>
                                    {%- else %}
                                    <td style='width:10%'></td>
                                    {%- endif %}
                                    {%- if job_state.result.io_log_as_flat_text != "" %}
                                    <td style='width:10%'><a href="#{{ mainloop.index }}-{{ loop.index }}-log">I/O log</a></td>
                                    {%- else %}
                                    <td style='width:10%'></td>
                                    {%- endif %}
                                    <td style='width:35%'>{{ job_state.result.comments if job_state.result.comments != None }}</td>
                                </tr>
                            {%- endfor %}
                            </tbody>
                        </table>
                    </div>
                    {%- endfor %}
                    {%- if resource_map %}
                    <div data-role="collapsible" data-filter="true" data-input="#filterTable-input1" class="openMe" data-content-theme="false">
                    <h3>Resources<span class="ui-li-count {{ OUTCOME_METADATA_MAP[resource_global_outcome].tr_label }}Count">{{ OUTCOME_METADATA_MAP[resource_global_outcome].tr_label }}</span></h3>
                        <table data-role="table" id="resource" data-filter="true" data-input="#filterTable-input1" class="ui-body-d ui-shadow table-stroke ui-responsive">
                            <thead>
                                <tr class="ui-bar-d">
                                </tr>
                            </thead>
                            <tbody>
                            {%- for job_id, job_state in job_state_map|dictsort if job_state.result.outcome != None and job_state.job.plugin == "resource" %}
                                {%- if job_state.job.partial_id == "package" %}
                                <tr>
                                    <td data-filtertext="{{ job_state.job.partial_id }}" style='width:35%'>{{ job_state.job.partial_id }}</td>
                                    <td style='width:10%; font-weight: bold; color: {{ job_state.result.outcome_meta().color_hex }}'>{{ job_state.result.outcome_meta().tr_label }}</td>
                                    {%- if job_state.effective_certification_status != "unspecified" %}
                                    <td style='width:10%'>{{ job_state.effective_certification_status }}</td>
                                    {%- else %}
                                    <td style='width:10%'></td>
                                    {%- endif %}
                                    {%- if job_state.result.io_log_as_flat_text != "" %}
                                    <td style='width:10%'><a href="#package-log">View</a></td>
                                    {%- else %}
                                    <td style='width:10%'></td>
                                    {%- endif %}
                                    <td style='width:35%'>{{ job_state.result.comments if job_state.result.comments != None }}</td>
                                </tr>
                                {%- else %}
                                <tr>
                                    <td data-filtertext="{{ job_state.job.partial_id }}" style='width:35%'>{{ job_state.job.partial_id }}</td>
                                    <td style='width:10%; font-weight: bold; color: {{ job_state.result.outcome_meta().color_hex }}'>{{ job_state.result.outcome_meta().tr_label }}</td>
                                    {%- if job_state.effective_certification_status != "unspecified" %}
                                    <td style='width:10%'>{{ job_state.effective_certification_status }}</td>
                                    {%- else %}
                                    <td style='width:10%'></td>
                                    {%- endif %}
                                    {%- if job_state.result.io_log_as_flat_text != "" %}
                                    <td style='width:10%'><a href="#resource-{{ loop.index }}-log">I/O log</a></td>
                                    {%- else %}
                                    <td style='width:10%'></td>
                                    {%- endif %}
                                    <td style='width:35%'>{{ job_state.result.comments if job_state.result.comments != None }}</td>
                                </tr>
                                {%- endif %}
                            {%- endfor %}
                            </tbody>
                        </table>
                    </div>
                    {%- endif %}
                    {%- for job_id, job_state in job_state_map|dictsort if job_state.result.outcome != None and job_state.job.plugin == "attachment" %}
                    {%- if loop.first %}
                    <div data-role="collapsible" data-filter="true" data-input="#filterTable-input1" class="openMe" data-content-theme="false">
                    <h3>Attachments<span class="ui-li-count {{ OUTCOME_METADATA_MAP[attachment_global_outcome].tr_label }}Count">{{ OUTCOME_METADATA_MAP[attachment_global_outcome].tr_label }}</span></h3>
                        <table data-role="table" id="resource" data-filter="true" data-input="#filterTable-input1" class="ui-body-d ui-shadow table-stroke ui-responsive">
                            <thead>
                                <tr class="ui-bar-d">
                                </tr>
                            </thead>
                            <tbody>
                    {%- endif %}
                                <tr>
                                    <td data-filtertext="{{ job_state.job.partial_id }}" style='width:35%'>{{ job_state.job.partial_id }}</td>
                                    <td style='width:10%; font-weight: bold; color: {{ job_state.result.outcome_meta().color_hex }}'>{{ job_state.result.outcome_meta().tr_label }}</td>
                                    {%- if job_state.effective_certification_status != "unspecified" %}
                                    <td style='width:10%'>{{ job_state.effective_certification_status }}</td>
                                    {%- else %}
                                    <td style='width:10%'></td>
                                    {%- endif %}
                                    {%- if job_state.result.io_log_as_text_attachment != "" %}
                                    <td style='width:10%'><a href="#attachment-{{ loop.index }}-log">View</a></td>
                                    {%- else %}
                                    <td style='width:10%'></td>
                                    {%- endif %}
                                    <td style='width:35%'>{{ job_state.result.comments if job_state.result.comments != None }}</td>
                                </tr>
                    {%- if loop.last %}
                            </tbody>
                        </table>
                    </div>
                    {%- endif %}
                    {%- endfor %}
            </div><!-- /content -->
            <div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
                <p>This report was created using Checkbox {{ client_version }} on {{ timestamp }}</p>
                <p>Copyright {{timestamp.split("-")[0]}} Canonical Ltd.</p>
            </div><!-- /footer -->
        </div><!-- /page -->
        {%- if ns ~ "package" in resource_map %}
        <div class="jqm-demos ui-page" tabindex="0" data-url="package" id="package-log" data-role="page">
            <div data-role="header" class="jqm-header">
                <h1>Debian Packages</h1>
            </div>
            <div role="main" class="ui-content">
                <form>
                    <input id="filterTable-input2" data-type="search">
                </form>
                <table data-role="table" id="table2" data-filter="true" data-input="#filterTable-input2" class="ui-body-d ui-shadow table-stripe ui-responsive">
                    <thead>
                        <tr class="ui-bar-d">
                            <th>Name</th>
                            <th>Version</th>
                        </tr>
                    </thead>
                    <tbody>
                    {%- for package in resource_map[ns ~ "package"] %}
                        <tr>
                            <td>{{ package["name"] }}</td>
                            <td>{{ package["version"] }}</td>
                        </tr>
                    {%- endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {%- endif %}
    {%- for cat_id, cat_name in category_map|dictsort(false, 'value') %}
        {% set mainloop = loop %}
        {%- for job_id, job_state in job_state_map|dictsort if job_state.result.outcome != None and job_state.effective_category_id == cat_id and job_state.job.plugin not in ("resource", "attachment") %}
        {%- if job_state.result.io_log_as_flat_text != "" %}
        <div class="jqm-demos ui-page" tabindex="0" data-url="{{ mainloop.index }}-{{ loop.index }}" id="{{ mainloop.index }}-{{ loop.index }}-log" data-role="page">
            <div data-role="header" class="jqm-header">
                <h1>{{ job_state.job.tr_summary() }}</h1>
            </div>
            <div role="main" class="ui-content">
                <pre style="white-space: pre-wrap; word-wrap: break-word;">{{ job_state.result.io_log_as_flat_text }}</pre>
            </div>
        </div>
        {%- endif %}
        {%- endfor %}
    {%- endfor %}
    {%- for job_id, job_state in job_state_map|dictsort if job_state.result.outcome != None and job_state.job.plugin == "resource" %}
    {%- if job_state.result.io_log_as_flat_text != "" and job_state.job.partial_id != "package" %}
    <div class="jqm-demos ui-page" tabindex="0" data-url="resource-{{ loop.index }}" id="resource-{{ loop.index }}-log" data-role="page">
        <div data-role="header" class="jqm-header">
            <h1>{{ job_state.job.tr_summary() }}</h1>
        </div>
        <div role="main" class="ui-content">
            <pre style="white-space: pre-wrap; word-wrap: break-word;">{{ job_state.result.io_log_as_flat_text }}</pre>
        </div>
    </div>
    {%- endif %}
    {%- endfor %}
    {%- for job_id, job_state in job_state_map|dictsort if job_state.result.outcome != None and job_state.job.plugin == "attachment" %}
    {%- if job_state.result.io_log_as_text_attachment != "" %}
    <div class="jqm-demos ui-page" tabindex="0" data-url="attachment-{{ loop.index }}" id="attachment-{{ loop.index }}-log" data-role="page">
        <div data-role="header" class="jqm-header">
            <h1>{{ job_state.job.tr_summary() }}</h1>
        </div>
        <div role="main" class="ui-content">
            <pre style="white-space: pre-wrap; word-wrap: break-word;">{{ job_state.result.io_log_as_text_attachment }}</pre>
        </div>
    </div>
    {%- endif %}
    {%- endfor %}
    </body>
</html>

