{% extends "base.html" %}

{% block body %}
<a href="/" class="btn btn-outline-secondary" style="position:absolute;left:80px;top:10px;">Home</a>

<div class="container" style="position:relative;top:100px;">
    {% with messages = get_flashed_messages() %}
    {% if messages %}
    <div class="alert alert-success" role="alert">
        <ul>
            {% for message in messages %}
            <li>{{ message }}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
    {% endwith %}
    <div>
        <form action="/baseline" method="POST">
            <button type="submit" class="btn btn-link">Make all images baseline</button>
        </form>
    </div>
    <table class="table table-striped table-sm" id="results">
        <thead>
        <tr>
            <th></th>
            <th>Test Name</th>
        </tr>
        </thead>
        <tbody>
            {% for test, value in data.items() %}
            <tr data-toggle="collapse" data-target='div[value={{value[0][4]}}]' class="accordion-toggle">
                <td>
                    <button class="btn btn-default btn-sm"><i class="fas fa-arrow-right"></i></button>
                </td>
                <td>{{test}}</td>
            </tr>
            <tr>
                <td colspan="12" class="hiddenRow">
                    <div class="accordian-body collapse" value="{{value[0][4]}}">
                        <table class="table table-bordered table-hover" id="innerResults">
                            <thead>
                                <tr>
                                    <th style="text-align:center;vertical-align:middle">Baseline</th>
                                    <th style="text-align:center;vertical-align:middle">Actual</th>
                                    <th style="text-align:center;vertical-align:middle">Diff</th>
                                    <th>Diff value<br><font size="2">(Exp : Actual)</font></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in value %}
                                <tr>
                                    <td><a href={{row[0]}} target="_blank"><img src="{{row[0]}}" height="200" width="350"></a></td>
                                    <td><a href={{row[1]}} target="_blank"><img src="{{row[1]}}" height="200" width="350"></a></td>
                                    <td><a href={{row[2]}} target="_blank"><img src="{{row[2]}}" height="200" width="350"></a></td>
                                    <td style="color:{{row[3][1]}}">{{row[3][0]}}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<style>
  tr.accordion-toggle:hover {
    cursor:pointer;
  }
</style>
<script>
    $(document).ready(function() {
      var pass = 0;
      var fail = 0;
      var t = 1;
      $("table#innerResults").each(function() {
        var $items = $(this).find('tbody tr');
        $.each($items, function(n, e) {
          color = $(e).find('td:last').css('color');
          if (color == 'rgb(255, 0, 0)') {
            return false;
          }
        });
        if(color == 'rgb(255, 0, 0)') {
          $('table#results > tbody > tr:nth-child(' + t + ') > td:nth-child(2)').css('color','red');
          t = t+2;
          fail = fail + 1;
        }
        else  {
         $('table#results > tbody > tr:nth-child(' + t + ') > td:nth-child(2)').css('color','green');
         t = t+2;
         pass = pass + 1;
        }
      });

      $("tr.accordion-toggle").click(function () {
        classes = {
            "fa-arrow-down": "fa-arrow-right",
            "fa-arrow-right": "fa-arrow-down"
        }
        cls = $(this).find('i:first').attr("class").split(" ")[1];
        $(this).find('i:first').removeClass(cls).addClass(classes[cls]);
      });

    });
</script>
{% endblock %}
