{% 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>
</div>
<button id="filter_onlyOfficials" type="button" class="btn btn-light btn-sm" href="javascript:void(0)" onclick="toggle(this)" style="margin-left:30px;">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>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 {% if result.app.list.name == "official" %}official{% endif %}" level="{{ result.level if result.level >= 0 else "?" }}">
                    <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 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.url == None %}
				{% if result.date == None %}
				    <span class="daysAgo">???</span>
				{% else %}
				    <span class="daysAgo" timestamp="{{ result.date.timestamp() }}"></span>
				{% endif %}
                        {% else %}
				{% if result.date == None %}
				    <span class="daysAgo" href="{{ result.url.replace("consoleText", "consoleFull") }}">???</span>
				{% else %}
				    <span class="daysAgo" timestamp="{{ result.date.timestamp() }}" href="{{ result.url.replace("consoleText", "consoleFull") }}"></span>
				{% endif %}
                        {% endif %}
                        {% if result.commit != result.app.master_commit %}
                        <span class="oi oi-clock text-warning"
                              aria-hidden="true"
                              title="This test is outdated : a more recent commit exists in master than the one tested."></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_diff > 0 %}
                        <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" }
          ]
      }]
  });
  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 onlyOfficials = $("#filter_onlyOfficials").hasClass("btn-primary");
    var levelFilter = $("input[type='radio']:checked").attr("level");
    $(".resultline").show();
    if (onlyOfficials) { $(".resultline:not(.official)").hide(); }
    if (levelFilter != "all") { $(".resultline[level!='"+levelFilter+"']").hide(); }
}

</script>

{% endblock %}