<!DOCTYPE html>
<html>
<head>
    <title>Device Diff check</title>
    <link rel="icon" href="favicon.ico">
    <link href="https://unpkg.com/bonsai.css@latest/dist/bonsai.min.css" rel="stylesheet">
    <style>
        :root {{
            --standard-text-color: #c2baba;
            --failure-text-color: #f04646;
            --success-text-color: #46d046;
            --deemphasized-text-color: #687e7e;
            
            --far-background-color: #18191a;
            --panel-background-color: #43484b;
            --header-background-color: #292b2c;
            --alternate-row-background-color: #373B3D;
        }}

        details h2:not(:first-of-type) {{
            padding-top: 50px;
        }}
        
        header {{
            text-align: left;
        }}
        body {{
            background-color: var(--far-background-color);
            color: var(--standard-text-color);
        }}

        .hidden {{
          display: none;
        }}

        details {{
            background-color: var(--panel-background-color);
        }}

        td {{
            text-align: left;
        }}

        th {{
            text-align: left;
        }}

        details summary {{
            background-color: var(--header-background-color);
            overflow: auto;
            color: var(--standard-text-color);
        }}

        .success  {{
            color: var(--success-text-color);
        }}

        .fail {{
            color: var(--failure-text-color);
        }}

        .deemphasize {{
            color: var(--deemphasized-text-color);
        }}

        .legend_summary {{
            font-weight: bold;
        }}

        .entry {{
            font-size: 20px;
            vertical-align:top;
        }}

        .entry_table_values {{
            border-spacing: 10px 0; 
            text-align: right;
            padding-top: 20px;
        }}

        .entry_table_images {{
            border-spacing: 10px 0; 
            text-align: right;
        }}

        .header_table {{
            width:100%;
            text-align:left;
        }}

        .header_table tbody tr:nth-child(odd),
        .device_summary_values tbody tr:nth-child(odd) {{
            background-color: var(--alternate-row-background-color);
        }}
    </style>
</head>
<body>
    <details open>
        <summary class="fail">{failed_number} Failed Tests</summary>
        <p>
            {failed}
        </p>
    </details>
    <details open>
        <summary class="fail">{missing_candidate_number} Missing Candidate</summary>
        <p>
            {missing_candidate}
        </p>
    </details>
    <details open>
        <summary class="fail">{missing_golden_number} Missing Golden</summary>
        <p>
            {missing_golden}
        </p>
    </details>
    <details class="{pass_hide_class}">
        <summary class="success">{passing_number} Passing Tests</summary>
        <p>
            {passing}
        </p>
    </details>
    <details class="{identical_hide_class}">
        <summary>{identical_number} Identical Images</summary>
        <p>
            {identical}
        </p>
    </details>
    <details>
        <summary class="device_summary">Device Summary ({device_number} device(s))</summary>
            <table class="device_summary_values">
                <thead> 
                    <tr> 
                        <th>Device Name</th>
                        <th>Fail Count</th>
                        <th>Missing Count</th>
                        <th>Passing Count</th>
                        <th>Identical Count</th>
                    </tr>
                </thead>
                <tbody>
                    {device_summaries}
                </tbody>
            </table>
        </details>
    <details>
        <summary class="legend_summary">legend</summary>
        <table class="header_table">
            <thead>
                <tr> 
                    <th> header </th>
                    <th> meaning </th>
                </tr>
            </thead>
            <tbody>
                <tr> 
                    <td> canvas/skia/rive mesh/text/vector </td>
                    <td> The data is the result of a test using one of our renderers, either canvas, skia or rive. We have 3 different tests, one to highlight mesh issues, one text and one vector.</td>
                </tr>
                <tr>  
                    <td> maxRGB mismatch </td>
                    <td> the largest individual RGB mismatch, this is on a single color channel presumably (@chris, can you confirm this, also do we do ARGB?) </td>
                </tr>
                <tr>  
                    <td> avgRGB mismatch </td>
                    <td> the average RGB mismatch of all pixels across all channels (@chris, does it make sense to do an avgRGB mismatch for mismatching pixels as well as for all pixels?) </td>
                </tr>
                <tr>  
                    <td> # of different pixels  </td>
                    <td> The total number of pixels that have any difference </td>
                </tr>
                <tr>  
                    <td> % of different pixels </td>
                    <td> The percentage of pixels that have any difference out of the total number of pixels </td>
                </tr>
                <tr>  
                    <td> candidate </td>
                    <td> The image produced on this test run for the given test (e.g using skia rendering the mesh test image) </td>
                </tr>
                <tr>  
                    <td> golden </td>
                    <td> The image we consider the "gold standard" for this test. This is the previously accepted target image that we want to compare our candidate against. </td>
                </tr>
                <tr>  
                    <td> color diff </td>
                    <td> A representation of the difference between the candidate and the golden image. Here we show the color difference for each individual pixel. pixels with the same color will be black (0 color difference in each channel) in this representation. this highlights how significant a difference is, white would be very significant. </td>
                </tr>
                <tr>  
                    <td> pixel diff </td>
                    <td> A representation of the difference between the candidate and the golden image. Here we show the color difference as white for any pixel that has any difference. this highlights where we have differences. </td>
                </tr>
            </tbody>
        </table>
    </details>
</body>
</html>