{% extends "tasks/view.html" %}
{% import 'RunFusionAcceptance/compare_view.html' as compare_responses %}

{% block additional %}
    <style type="text/css">

        #report2, #report3, #report4, #report5, #report6, #report7 {position: fixed; }

        .menu1 > a,
        .menu1 #report2:target ~ a:nth-of-type(1),
        .menu1 #report3:target ~ a:nth-of-type(1),
        .menu1 #report4:target ~ a:nth-of-type(1),
        .menu1 #report5:target ~ a:nth-of-type(1),
        .menu1 #report6:target ~ a:nth-of-type(1),
        .menu1 #report7:target ~ a:nth-of-type(1),
        .menu1 > div { padding: 2px; border: 1px solid #aaa; }

        .menu1 > a {
            line-height: 28px;
            background: #eee;
            text-decoration: none;
            font-family: "Lucida Sans Unicode", "Lucida Grande", "Sans-Serif";
            font-size: 15px;
            color: black;
        }
        .menu1 a:active {
            font-size: 18px;
        }

        #report2,
        #report3,
        #report4,
        #report5,
        #report6,
        #report7,
        .menu1 > div,
        .menu1 #report2:target ~ div:nth-of-type(1),
        .menu1 #report3:target ~ div:nth-of-type(1),
        .menu1 #report4:target ~ div:nth-of-type(1),
        .menu1 #report5:target ~ div:nth-of-type(1),
        .menu1 #report6:target ~ div:nth-of-type(1),
        .menu1 #report7:target ~ div:nth-of-type(1) { display: none; }

        .menu1 > div:nth-of-type(1),
        .menu1 #report2:target ~ div:nth-of-type(2),
        .menu1 #report3:target ~ div:nth-of-type(3),
        .menu1 #report4:target ~ div:nth-of-type(4),
        .menu1 #report5:target ~ div:nth-of-type(5),
        .menu1 #report6:target ~ div:nth-of-type(6),
        .menu1 #report7:target ~ div:nth-of-type(7){ display: block; }

        .menu1 > a:nth-of-type(1),
        .menu1 #report2:target ~ a:nth-of-type(2),
        .menu1 #report3:target ~ a:nth-of-type(3),
        .menu1 #report4:target ~ a:nth-of-type(4),
        .menu1 #report5:target ~ a:nth-of-type(5),
        .menu1 #report6:target ~ a:nth-of-type(6),
        .menu1 #report7:target ~ a:nth-of-type(7){ border-bottom: 5px solid #bbb; }


        .results {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
            margin: 20px;
            }
        .results th {
            font-weight: normal;
            font-size: 14px;
            color: #339;
            padding: 7px;
             }
        .results tbody td {
            background: #DDD;
            }
        .results td {
            color: #black;
            border-top: 1px solid #fff;
            padding: 7px;
            }
        .results tr:hover td {background: #000;
            background: transparent;}

    </style>

    <br />
    <div class="menu1">
        <br id="report2"/><br id="report3"/><br id="report4"/><br id="report5"/><br id="report6"/><br id="report7"/>
        <a href="#report1">Diff stats</a>
        <a href="#report2">Zeroed Factors</a>
        <a href="#report3">Doc size diff</a>
        <a href="#report4">Fresh Factors</a>
        <a href="#report5">Fresh Zeroes</a>
        <a href="#report6">Mango Factors</a>
        <a href="#report7">Mango Zeroes</a>
        <div>
            {{ diff_view.render_big_diff(task.ctx["diffs"]) }}
        </div>
        <div>
            {{ diff_view.render_big_zeroes(task.ctx["zeroes"]) }}
        </div>
        <div>
            {% if task.ctx["prod_doc_size"] and task.ctx["new_doc_size"] %}
                <table class="results">
                    <tr>
                        <th> Prod </th>
                        <th> New </th>
                        <th> Diff </th>
                    </tr>
                    <tr>
                        <td> {{ task.ctx["prod_doc_size"] }} </td>
                        <td> {{ task.ctx["new_doc_size"] }} </td>
                        <td> {{ task.ctx["doc_size_diff"] }} </td>
                    </tr>
                </table>

            {% else %}
                <font color="gray" size="12px">Not Available</font>
            {% endif %}

        </div>
        <div>
            {{ diff_view.render_short_diff(task.ctx["fresh_diffs"]) }}
        </div>
        <div>
            {{ diff_view.render_short_zeroes(task.ctx["fresh_zeroes"]) }}
        </div>
        <div>
            {{ diff_view.render_short_diff(task.ctx["mango_diffs"]) }}
        </div>
        <div>
            {{ diff_view.render_short_zeroes(task.ctx["mango_zeroes"]) }}
        </div>
    </div>

{% endblock %}