{% extends "squad/base.jinja2" %}

{% block content %}

<div ng-app='Build'>
{% include "squad/build-nav.jinja2" %}
</div>

<h2>{{ _('All test results') }}</h2>

{% with items=results %}
{% include "squad/_pagination.jinja2" %}
{% endwith %}

<div>
    <div class='row row-bordered'>
        <div class='col-md-12 col-sm-12 filter'>
          <a id="searchLink"><button type='button' class='btn btn-primary fa fa-search'></button></a>
          <input name='search' id='search' type='text' placeholder='{{ _('Filter results ...') }}' value='{{search}}' />
        </div>
    </div>

    <table class='test-results'>
        <thead>
            <th>{{ _('Test') }}</th>
            {% for env in results.environments %}
            <th>{{env}}</th>
            {% endfor %}
        </thead>
        {% if results %}
            {% for test in results %}
            {% set test_history_url = url('legacy_test_history', args=[build.project.group.slug, build.project.slug, test.name]) %}
            <tr id='test-{{test.name|slugify}}' ng-show="match('test-{{test.name|slugify}}')">
                <td><a href="{{ test_history_url }}">{{test.name}}</a></td>
                {% for status in test %}
                <td class="{{status[0]}}"><a href="{{ test_history_url }}">{{status[0]}}{% if status[1] %} ({{status[1]}} %){% endif %}</a>
                  {% if status[2] %}
                  <a href='#' data-toggle="modal" data-target="#info_modal" data-status="{{ status[1] }}"><span data-toggle="tooltip" data-placement="right" title="{{ _('Show info') }}" class='fa fa-info-circle'></span></a>
                  {% endif %}
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        {% else %}
            <tr>
                <td colspan="{{results.environments|length|add(1)}}" class='alert alert-warning'>
                    <em>{{ _('This build has no test results yet.') }}</em>
                </td>
            </tr>
        {% endif %}
    </table>

</div>

<!-- Modal HTML -->
<div id="info_modal" class="modal fade" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{{ _('Test Info') }}</h4>
      </div>
      <div class="modal-body">
        <div id="test_description" style="display: none;">
          <p><strong>{{ _('Test description:') }}</strong></p>
          <div id="test_description_inner">
          </div>
        </div>
        <div id="test_reproduce" style="display: none;">
          <p><strong>{{ _('How to reproduce:') }}</strong></p>
          <div id="test_reproduce_inner">
          </div>
        </div>
        <div id="test_log" style="display: none;">
          <p><strong>{{ _('Test log:') }}</strong></p>
          <div id="test_log_inner">
            <pre></pre>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="modalClosed()">{{ _('Close') }}</button>
      </div>
    </div>
  </div>
</div>

{% with items=results %}
{% include "squad/_pagination.jinja2" %}
{% endwith %}

{% endblock %}

{% block javascript %}
<script type="module" src='{{static("squad/build.js")}}'></script>
<script type="text/javascript" src='{{static("squad/table.js")}}'></script>
<script type="text/javascript">
$('[data-toggle="tooltip"]').tooltip();
function loadSearchURL(pageParam, search) {
  searchURL = pageParam + "&search=" + search;
  window.location = searchURL;
}
$("#search").keypress(function(e) {
  if(e.which == 13) {
    window.location = "?page=1&search=" + $("#search").val();
    return false;
  }
});
$("#searchLink").click(function(event) {
  window.location = "?page=1&search=" + $("#search").val();
  return false;
});
$(".pagination > li > a").click(function(event) {
  window.location = $(this).attr("href") + "&search=" + $("#search").val();
  return false;
});
$('#info_modal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);
  var status = button.data('status');
  if(status['test_description']) {
    $('#test_description').show();
    $('#test_description_inner').html(status['test_description']);
  }
  if(status['suite_instructions'] || status['test_instructions']) {
    $('#test_reproduce').show();
    if(status['suite_instructions']) {
      $('#test_reproduce_inner').html(status['suite_instructions']);
    } else if (status['test_instructions']) {
      $('#test_reproduce_inner').html(status['test_instructions']);
    }
  }
  if(status['test_log']) {
    $('#test_log').show();
    $('#test_log_inner pre:first').html(status['test_log']);
  }
})
</script>
{% endblock %}
