{%- 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_lite -%}
{%- 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 ~ 'system_info_json' in state.job_state_map and state.job_state_map[ns ~ 'system_info_json'].result.outcome == 'pass' %}
                <h2>System Information</h2>
                {%- set system_info_json = state.job_state_map[ns ~ 'system_info_json'].result.io_log_as_text_attachment.rstrip() %}
                {%- set system_info = system_info_json|json_load_ordered_dict %}
                <table data-role="table" id="system-info" data-mode="reflow" class="ui-body-d ui-responsive table-stroke">
                    <thead><tr class="ui-bar-d"></tr></thead>
                    </tbody>
                    {%- for section, section_data in system_info.items() %}
                        <tr style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">
                        <th style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; vertical-align:top; font-size: 0.85em;">{{ section }}</th>
                        <td style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; line-height: 1em;">
                        {%- for info in section_data %}
                        <p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-size: 0.85em">
                        {% autoescape false %}
                        {%- if section in ('System', 'Machine', 'CPU') %}
                        {{ info|highlight_keys }}
                        {%- else %}
                        {{ info }}
                        {%- endif %}
                        {% endautoescape %}</p>
                        {%- endfor %}
                        </td>
                        </tr>
                    {%- endfor %}
                    </tbody>
                </table>
                <br>
                {%- endif %}
                <h2>Tests Results</h2>
                    {%- if manager.test_plans %}
                    <p>Test plan: {{ manager.test_plans[0] }}</p>
                    {%- endif %}
                    {%- if not 'without-session-desc' in options and app_blob['description'] %}
                    <p> {{ app_blob['description']|replace("\\n", "<br />")|replace("\n", "<br />")|safe }} </p>
                    {%- endif %}
                    <div id="canvas-holder" style="width:300px">
                        <canvas id="chart-area"></canvas>
                    </div>
                    <script>
                        var config = {
                            type: 'pie',
                            data: {
                                datasets: [{
                                    data: [
                                        {%- for outcome, total in state.get_test_outcome_stats()|dictsort %}
                                        {{ total }},
                                        {%- endfor %}
                                    ],
                                    backgroundColor: [
                                        {%- for outcome, total in state.get_test_outcome_stats()|dictsort %}
                                        "{{ OUTCOME_METADATA_MAP[outcome].color_hex }}",
                                        {%- endfor %}
                                    ],
                                }],
                                labels: [
                                    {%- for outcome, total in state.get_test_outcome_stats()|dictsort %}
                                    "{{ OUTCOME_METADATA_MAP[outcome].tr_label }}",
                                    {%- endfor %}
                                ]
                            },
                            options: {
                                responsive: true,
                                legend: {
                                    display: true,
                                    onClick: function () {},
                                    position: 'right',
                                    labels: {
                                        fontSize: 15,
                                        fontStyle: 'normal',
                                        generateLabels: function(chart) {
                                            var data = chart.data;
                                            if (data.labels.length && data.datasets.length) {
                                                return data.labels.map(function(label, i) {
                                                    var meta = chart.getDatasetMeta(0);
                                                    var ds = data.datasets[0];
                                                    var arc = meta.data[i];
                                                    var custom = arc && arc.custom || {};
                                                    var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
                                                    var arcOpts = chart.options.elements.arc;
                                                    var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
                                                    var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
                                                    var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

                                                    // We get the value of the current label
                                                    var value = chart.config.data.datasets[arc._datasetIndex].data[arc._index];

                                                    return {
                                                        // Instead of `text: label,`
                                                        // We add the value to the string
                                                        text: label + " : " + value,
                                                        fillStyle: fill,
                                                        strokeStyle: stroke,
                                                        lineWidth: bw,
                                                        hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
                                                        index: i
                                                    };
                                                });
                                            } else {
                                                return [];
                                            }
                                        }
                                    }
                                }
                            }
                        };

                        window.onload = function(){
                            var ctx = document.getElementById('chart-area').getContext('2d');
                            window.myPie = new Chart(ctx, config);
                        };
                        $(function(){
                            $('#expanseAll').on('click', function() {
                                $( ".openMe" ).collapsible( "expand" );
                            });
                            $('#collapseAll').on('click', function() {
                                $( ".openMe" ).collapsible( "collapse" );
                            });
                        });
                    </script>
                    <br>
                    <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_id|strip_ns }}" style='width:35%'>{{ job_id|strip_ns }}</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%'>{% autoescape false %}{{ job_state.result.comments if job_state.result.comments != None }}{% endautoescape %}</td>
                                </tr>
                            {%- endfor %}
                            </tbody>
                        </table>
                    </div>
                    {%- endfor %}
                    <p></p>
                    <h2>Logs</h2>
                    {%- 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_id|strip_ns == "package" %}
                                <tr>
                                    <td data-filtertext="{{ job_id|strip_ns }}" style='width:35%'>{{ job_id|strip_ns }}</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_id|strip_ns }}" style='width:35%'>{{ job_id|strip_ns }}</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_id|strip_ns }}" style='width:35%'>{{ job_id|strip_ns }}</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 %}
                                    {%- set img_type = job_state.result.img_type %}
                                    {%- if img_type or 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 {{ 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_id|strip_ns != "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" %}
    {%- set img_type = job_state.result.img_type %}
    {%- if img_type %}
    {%- set base64_data = job_state.result.io_log_as_base64 %}
    <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">
            <img style="height: 100%; width: 100%" src="data:image/{{ img_type }};base64,{{ base64_data }}" />
        </div>
    </div>
    {%- elif 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>

