{% extends "base.html" %}
{% block content %}

<h2 class="text-center my-3">{{ ref.display_name }} vs. {{ target.display_name }}</h2>
<div id="compareSummary" style="height: 270px;" class="col-sm-6 offset-sm-3 my-3"></div>

<div class="row">
    <div class="mx-auto">
	<div style="text-align:center;">
<button id="filter_onlyDiffs" type="button" class="btn btn-primary btn-sm" href="javascript:void(0)" onclick="toggle(this)">Show only diffs</button>
<button id="filter_onlyOfficials" type="button" class="btn btn-light btn-sm" href="javascript:void(0)" onclick="toggle(this)">Show only officials</button>
	</div>
        <div>
            <table class="table table-responsive ci-app-table">
                <thead>
                    <tr>
                        <th class="ci-app-row-title"></th>
                        <th class="ci-app-test-title"><div>{{ ref.display_name }} </div></th>
                        <th class="ci-app-test-title"><div>{{ target.display_name }} </div></th>
                        <th class="ci-app-test-title"></th>
                    </tr>
                </thead>
                <tbody>
                {% for result in results %}
                <tr class="ci-branch-comparison {% if result.app.list.name == "official" %}official{% endif %}" value="{{ result.compare }}" app="{{ result.app.name }}">
                    <td class="ci-app-row-title">
                        {% if result.app.list.name == "official" %}
                            <span class="official-star oi oi-star" title="Official" aria-hidden="true"></span>
                        {% endif %}
                        <a href="{{ url_for('main.appci_app', app=result.app.name) }}">
                            <span title="App">
                            <strong>{{ result.app.name }}</strong></span>
                        </a>
                    </td>
                    <td class="ci-app-level" value="{{ result.level }}"><div title="Level">
                    <strong>
                        {{ result.level if result.level >= 0 else "" }}
                    </strong></div></td>
                    <td class="ci-app-level" value="{{ result.level_compare }}"><div title="Level">
                    <strong>
                        {{ result.level_compare if result.level_compare >= 0 else "" }}
                    </strong></div></td>
                    <td class="compare">
                    {% if result.level == -1 or result.level_compare == -1 %}
                        <span class="oi oi-question-mark level-unknown" title="Don't know" aria-hidden="true"></span>
                    {% elif result.level > result.level_compare %}
                        <span class="oi oi-chevron-bottom level-regression" title="Regression" aria-hidden="true"></span>
                    {% elif result.level < result.level_compare %}
                        <span class="oi oi-chevron-top level-improvement" title="Improvement" aria-hidden="true"></span>
                    {% endif %}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/canvasjs.min.js') }}"></script>
<script>
window.onload = function () {
  var chart = new CanvasJS.Chart("compareSummary", {
      animationEnabled: false,
      data: [{
          type: "doughnut",
          startAngle: -90,
          //innerRadius: 60,
          indexLabelFontSize: 17,
          indexLabel: "{label} - #percent%",
          toolTipContent: "<b>{label}:</b> {y} (#percent%)",
          dataPoints: [
              { y: $(".ci-branch-comparison[value=unknown]").length, label: "Unknown", color:"#cccccc" },
              { y: $(".ci-branch-comparison[value=broken]").length, label:"Broken", color: "#d9534f" },
              { y: $(".ci-branch-comparison[value=regression]").length,  label: "Regressions", color: "#f0ad4e" },
              { y: $(".ci-branch-comparison[value=same]").length,  label: "Same", color: "#419fef" },
              { y: $(".ci-branch-comparison[value=improvement]").length,  label: "Improvements", color: "#46bd32" }
          ]
      }]
  });
  chart.render();
  update_filters();
}

function toggle(e) {
    $(e).toggleClass("btn-light");
    $(e).toggleClass("btn-primary");
    update_filters();
}
function update_filters() {
    var onlyDiffs = $("#filter_onlyDiffs").hasClass("btn-primary");
    var onlyOfficials = $("#filter_onlyOfficials").hasClass("btn-primary");
    $(".ci-branch-comparison").show();
    if (onlyDiffs) { $(".ci-branch-comparison[value='same']").hide(); }
    if (onlyOfficials) { $(".ci-branch-comparison:not(.official)").hide(); }
}

</script>



{% endblock %}