<!doctype html>
<html lang="en">

<head>
    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="template/style.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="template/filters.js"></script>
    <script src="template/chosen.jquery.min.js" type="text/javascript"></script>
    <title>Report</title>
</head>

<body>
    <div class="main">
        <h2>Operations coverage summary: {{report_tag}} {{ timestamp }}</h2>
        <div class="legend">
            <div>
                <span class="table-primary border"></span><span>Collected statistic info</span>
            </div>
            <div>
                <span class="table-secondary border">N/A</span><span>No Tests</span>
            </div>
            <div>
                <span><b>Status:</b></span>
                <span class="green">P:85</span><span>Passed</span>
                <span class="red">F:0</span><span>Failed</span>
                <span class="grey">S:2</span><span>Skipped</span>
                <span class="dark">C:0</span><span>Crashed</span>
            </div>
            <div>
                <span><b>Plugin operation implementation status:</b></span>
                <div class="checkmark"></div><div>Implemented</div>
                <div class="check"></div><div>Not implemented</div>
            </div>
        </div>
    </div>
    <!-- Filters block -->
    <div class="filters">
        <form id="filters">
            <div class="form-group">
                <label for="operationName"><b>Operation Name</b></label>
                <input id="operationName" type="text" class="form-control" />
            </div>
            <div class="form-group">
                <label for="opsetNumber"><b>Opset Number</b></label>
                <select id="opsetNumber" class="form-control"></select>
            </div>
            <div class="form-group">
                <label for="devices"><b>Devices</b></label>
                <select id="devices" class="form-control"></select>
            </div>
            <div class="form-group">
                <label for="implementation"><b>Plugin Implementation</b></label>
                <select id="implementation" class="form-control">
                    <option value="0">All</option>
                    <option value="i">Implemented</option>
                    <option value="ni">Not implemented</option>
                    <option value="ns">No status</option>
                </select>
            </div>
            <div class="form-group col-5" style="padding-left:0">
                <label for="status"><b>Status</b></label>
                <select id="status" class="form-control" multiple>
                    <option value="100p">100% Passed</option>
                    <option value="100f">100% Failed</option>
                    <option value="p">Passed</option>
                    <option value="f">Failed</option>
                    <option value="s">Skipped</option>
                    <option value="c">Crashed</option>
                    <option value="ex">Existing tests</option>
                    <option value="na">No tests</option>
                    <option value="ns">No status</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Apply filters</button>
            <button type="button" class="btn btn-secondary" id="reset">Reset filters</button>
        </form>
    </div>

    <!-- Results -->
    <table class="table table-hover" id="report">
        <thead>
            <tr>
                <th class="table-dark" scope="col" style="position: sticky; top: 97px">Operation</th>
                {% for d in devices -%}
                <th class="table-dark device {{ d }}" style="position: sticky; top: 97px">{{ d }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody id="statistic">
            <tr>
                <th class="table-primary" scope="row">Total: <i>{{ordered_ops|length}}</i></th>
                {% for d in devices -%}
                    <td class="table-primary {{ d }} test_total"> {% if d in covered_ops -%} {{covered_ops[d]}} {% else -%} 0 {% endif -%}</td>
                {% endfor %}
            </tr>
            <tr>
                <th class="table-primary" scope="row">Trusted op (passrate=100%):</th>
                {% for d in devices -%}
                <td class="table-primary  {{ d }} trusted-ops">{{trusted_ops[d]}} %</td>
                {% endfor %}
            </tr>
            <tr>
                <th class="table-primary" scope="row">Tested op counter:</th>
                {% for d in devices -%}
                <td class="table-primary  {{ d }} tested-ops_count">{{general_test_count[d]}}</td>
                {% endfor %}
            </tr>
            <tr>
                <th class="table-primary" scope="row">AVG passrate per op (=sum_pass_rates/covered_ops_num):</th>
                {% for d in devices -%}
                <td class="table-primary  {{ d }} avg_pass_rate">{{pass_rate_avg[d]}} %</td>
                {% endfor %}
            </tr>
            <tr>
                <th class="table-primary" scope="row">General passrate (=passed_tests/all_tests):</th>
                {% for d in devices -%}
                <td class="table-primary  {{ d }} general_pass_rate">{{general_pass_rate[d]}} %</td>
                {% endfor %}
            </tr>
        </tbody>
        <tbody id="data">
            {% for op in ordered_ops -%}
            <tr>
                <th scope="row" name="{{ op }}">{{ op }}</th>

                {% for d in devices -%}
                {% if op in results[d] -%}
                <td class="value {{ d }} {% if results[d][op].implemented == 'true' -%} impl {% else -%} not_impl {% endif -%}"
                    passed="{{ results[d][op].passed }}" failed="{{ results[d][op].failed }}"
                    skipped="{{ results[d][op].skipped }}" crashed="{{ results[d][op].crashed }}"
                    value="{% if (results[d][op].passed != '0' or results[d][op].failed != '0' or results[d][op].crashed != '0' or results[d][op].skipped) != '0' -%}{{ results[d][op].passrate }}{% else -%}---{% endif -%}"
                    title="{% if results[d][op].implemented == 'true' -%}
                            {{op}} is implemented in {{d}} plugin
                        {% else -%}
                            {{op}} is not implemented in {{d}} plugin
                        {% endif -%}">
                    {% if (results[d][op].passed != '0' or results[d][op].failed != '0' or results[d][op].crashed != '0' or results[d][op].skipped) != '0' -%}
                        {{ results[d][op].passrate }} %<br />
                    {% else -%}
                        ---<br />
                    {% endif -%}
                    <div class="flex">
                        <div>
                            {% if (results[d][op].passed != '0' or results[d][op].failed != '0' or results[d][op].crashed != '0' or results[d][op].skipped) != '0' -%}
                                <span class="green" title="Passed">P:{{ results[d][op].passed }}</span>
                                <span class="red" title="Failed">F:{{ results[d][op].failed }}</span>
                                <span class="grey" title="Skipped">S:{{ results[d][op].skipped }}</span>
                                <span class="dark" title="Crashed">C:{{ results[d][op].crashed }}</span>
                            {% else -%}
                            {% endif -%}
                        </div>
                        <div class="{% if results[d][op].implemented == 'true' -%} checkmark {% else -%} check {% endif -%}"></div>
                    </div>

                </td>
                {% else -%}
                    <td class="table-secondary {{ d }}">N/A</td>
                {% endif -%}

                {% endfor %}
            </tr>
            {% endfor -%}

        </tbody>
    </table>
    <div id="message" style="display:none">
        There is no data related to selected filters. Please set new filters.
    </div>
</body>

</html>
