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

<h2 class="text-center my-3">{{ branch.display_name }}</h2>
<div id="levelSummary" 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;">
<label for="level-all">Level : </label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-sm btn-light active">
    <input type="radio" name="options" level="all" id="filter_level-all" autocomplete="off" checked> All
  </label>
  <label class="btn btn-sm btn-light">
    <input type="radio" name="options" level="?" autocomplete="off"> ?
  </label>
  <label class="btn btn-sm btn-light">
    <input type="radio" name="options" level="0" autocomplete="off"> 0
  </label>
  <label class="btn btn-sm btn-light">
    <input type="radio" name="options" level="1" autocomplete="off"> 1
  </label>
  <label class="btn btn-sm btn-light">
    <input type="radio" name="options" level="2" autocomplete="off"> 2
  </label>
  <label class="btn btn-sm btn-light">
    <input type="radio" name="options" level="3" autocomplete="off"> 3
  </label>
  <label class="btn btn-sm btn-light">
    <input type="radio" name="options" level="4" autocomplete="off"> 4
  </label>
  <label class="btn btn-sm btn-light">
    <input type="radio" name="options" level="5" autocomplete="off"> 5
  </label>
  <label class="btn btn-sm btn-light">
    <input type="radio" name="options" level="6" autocomplete="off"> 6
  </label>
  <label class="btn btn-sm btn-light">
    <input type="radio" name="options" level="7" autocomplete="off"> 7
  </label>
  <label class="btn btn-sm btn-light">
    <input type="radio" name="options" level="8" autocomplete="off"> 8
  </label>
</div>
	</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>Level</div></th>
                        {% for test in tests %}
                         <th class="ci-app-test-title"><div><span>{{ test }}</span></div></th>
                        {% endfor %}
                         <th class="ci-app-test-title"></th>
                         <th></th>
                    </tr>
                </thead>
                <tbody>
                {% for result in app_results %}
                <tr app="{{ result.app.name }}" class="resultline" level="{{ result.level if result.level >= 0 else "?" }}" {% if result.outdated %}style="opacity: 0.8; background-color: #ddd;"{% endif %} >
                    <td class="ci-app-row-title">
                        <a href="{{ url_for('main.appci_app', app=result.app.name) }}">
                            <span class="font-weight-bold" title="More tests / info for this app">
                                {{ result.app.name }}</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>
                    {% for test in tests %}
                    {% set r = result.results[test] %}
                        <td class="ci-app-test-result">
                            <div title="{{ test }}" value="{{ r }}"></div>
                        </td>
                    {% endfor %}
                    <td class="ci-app-test-info px-0">
			{% if result.date == None %}
			    <span class="daysAgo" href="{{ branch.last_build_url(result.app) }}">???</span>
			{% else %}
			    <span class="daysAgo" timestamp="{{ result.date.timestamp() }}" href="{{ branch.last_build_url(result.app) }}"></span>
			{% endif %}
                        {% if result.outdated %}
                        <span class="oi oi-clock text-warning"
                              aria-hidden="true"
                              title="This test is outdated"></span>
                        {% endif %}
                        {% if result.app.public_commit != 'HEAD' and result.app.public_commit != result.app.master_commit %}
                        <!--
                            {% if result.app.public_vs_master_time_diff > 60 %}
                            <span class="oi oi-warning text-danger"
                            {% else %}
                            <span class="oi oi-warning text-warning"
                            {% endif %}
                              aria-hidden="true"
                              title="Master commit is not up to date with {{ result.app.list.name }}.json !"></span>
                        -->
                        {% endif %}
                        {% if result.app.testing_pr %}
                        <span class="oi oi-fork text-info"
                              aria-hidden="true"
                              title="An active testing branch exists for this app."></span>
                        {% endif %}
                    </td>
                    <td class="px-0">
                        <a href="{{ result.app.repo }}">
                         <span class="oi oi-external-link text-info"
                              aria-hidden="true"
                              title="To the Git repo!"></span>
                        </a>
                    </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("levelSummary", {
      animationEnabled: false,
      data: [{
          type: "doughnut",
          startAngle: -90,
          //innerRadius: 60,
          indexLabelFontSize: 17,
          indexLabel: "{label} - #percent%",
          toolTipContent: "<b>{label}:</b> {y} (#percent%)",
          dataPoints: [
              { y: $(".ci-app-level[value=-1]").length, label: "Unknown", color: "#cccccc" },
              { y: $(".ci-app-level[value=0]").length,  label: "Level 0", color: "#d9534f" },
              { y: $(".ci-app-level[value=1]").length,  label: "Level 1", color: "#E26D4F" },
              { y: $(".ci-app-level[value=2]").length,  label: "Level 2", color: "#E98D4E" },
              { y: $(".ci-app-level[value=3]").length,  label: "Level 3", color: "#f0ad4e" },
              { y: $(".ci-app-level[value=4]").length,  label: "Level 4", color: "#CBB052" },
              { y: $(".ci-app-level[value=5]").length,  label: "Level 5", color: "#A6B255" },
              { y: $(".ci-app-level[value=6]").length,  label: "Level 6", color: "#7AB659" },
              { y: $(".ci-app-level[value=7]").length,  label: "Level 7", color: "#5cb85c" },
              { y: $(".ci-app-level[value=8]").length,  label: "Level 8", color: "#4695d5" }
          ]
      }]
  });
  chart.render();
  $("input[type='radio']").change(function() { update_filters(); });
  update_filters();
}

function toggle(e) {
    $(e).toggleClass("btn-light");
    $(e).toggleClass("btn-primary");
    update_filters();
}

function update_filters() {
    var levelFilter = $("input[type='radio']:checked").attr("level");
    $(".resultline").show();
    if (levelFilter != "all") { $(".resultline[level!='"+levelFilter+"']").hide(); }
}

</script>

{% endblock %}