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

{% block content %}

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

<h2>{{ _('Metadata') }}</h2>
{% include "squad/_metadata.jinja2" %}

<div class="form-group row">
    <div class="col-md-12 col-sm-12" ng-controller='BuildCompareController' ng-init="init({{ build.project_id }})">
        <h2>{{ _('Compare builds') }}</h2>
        <form action="{{ url('compare_builds') }}" class="">
            <input type="hidden" name="project" value="{{build.project.full_name}}" />
            <input type="hidden" name="baseline" value="{{build.version}}" />
            <div class="row">
                <label for="target_version" class="col-md-3 col-sm-3">{{ _('Build version to compare: ') }}</label>
                <div class="col-md-4" style="height: 120%;">
                    <select id="target-select" onchange="this.form.submit()" name="target" placeholder="{{ _('Enter target version') }}" class="form-control"></select>
                </div>
            </div>
        </form>
    </div>
</div>

<div ng-controller='FilterController' data-param="filter-tests">
<h2>{{ _('Test results') }}</h2>
<div class='row row-bordered'>
    <div class='col-md-12 col-sm-12'>
        <form class='filter'>
            <span class='fa fa-search'></span>
            <input ng-model='filter' ng-change='update()' name='filter' type='text' placeholder='{{ _('Filter results ...') }}'/>
        </form>
    </div>
</div>
<div class="row" id="test-results">
    <div class='col-md-12 col-sm-12'>
        <table class='test-results'>
            <thead>
                <tr>
                    <th style='width: 150px'>{{ _('Suite') }}</th>
                    {% for environment in test_results.environments  %}
                    <th>{{environment}}</th>
                    {% endfor %}
                </tr>
            </thead>
            {% for suite, results in test_results.data.items() %}
	    <tr id='tests-{{suite.id}}' ng-show='match("tests-{{suite.id}}") || match("details-{{suite.id}}")'>
                <td ng-click='toggle_details("details-{{suite.id}}")'>
		    {{suite}}
		    <small>
		    <i class='fa fa-chevron-down pull-right' ng-show='!details_visible["details-{{suite.id}}"]'></i>
		    <i class='fa fa-chevron-up pull-right' ng-show='details_visible["details-{{suite.id}}"]'></i>
		    </small>
		</td>
                {% for environment in test_results.environments %}
                    {% with entry=results[environment] %}
                        {% if entry %}
                            {% if entry.has_failures %}
                            <td class='fail'><a class='fa fa-times text-danger' href='#' onclick='return false' ng-click='toggle_details("details-{{suite.id}}")'></a></td>
                            {% elif entry.has_known_failures %}
                            <td class='xfail'><a class='fa fa-bug text-info' href='#' onclick='return false' ng-click='toggle_details("details-{{suite.id}}")'></a></td>
                            {% else %}
                            <td class='pass'><a class='fa fa-check text-success' href='#' onclick='return false' ng-click='toggle_details("details-{{suite.id}}")'></a></td>
                            {% endif %}
                        {% else %}
                        <td></td>
                        {% endif %}
                    {% endwith %}
                {% endfor %}
            </tr>
	    <tr id='details-{{suite.id}}' ng-show='details_visible["details-{{suite.id}}"]'>
                <td></td>
                <td colspan="{{test_results.environments|length}}">
		    {% with entries=results.values() %}
                        <table class='test-results-details'>
                            <tr>
                                <th>
				    <i class='fa fa-microchip'></i>
				    {{ _('Test Run') }}
				</th>
                                <th>
				    <i class='fa fa-cog'></i>
				    {{ _('Environment') }}
				</th>
                                <th>
				    <i class='fa fa-check-square-o'></i>
				    {{ _('Test Results') }}
				</th>
                            </tr>
                        {% for entry in entries %}
                            {% for status in entry.statuses %}
			    <tr id='details-row-{{status.id}}' ng-show='details_visible["details-{{suite.id}}"]'>
                                    <td>
					<a href="{{url("testrun", args=[project.group.slug, project.slug, build.version, status.test_run.job_id])}}">
                                            {{status.test_run.job_id}}
                                        </a>
                                    </td>
                                    <td>
					<a href="{{url("testrun", args=[project.group.slug, project.slug, build.version, status.test_run.job_id])}}">
					    {{status.environment}}
					</a>
                                    </td>
                                    <td>
					<a href="{{testrun_suite_tests_url(project.group, project, build, status)}}">
                                        {% include "squad/_test_results_summary.jinja2" %}
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% endfor %}
                        </table>
                    {% endwith %}
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
</div>
</div> <!-- ng-controller=FilterController -->

<div ng-controller='FilterController' data-param="filter-metrics">
    <h2>{{ _('Metrics') }}</h2>
    <div class='row row-bordered'>
	<div class='col-md-12 col-sm-12'>
	    <form class='filter'>
		<span class='fa fa-search'></span>
		<input ng-model='filter' ng-change='update()' name='filter' type='text' placeholder='{{ _('Filter metrics ...') }}'/>
	    </form>
	</div>
    </div>
    <div class='metrics highlight-row'>
	{% for suite, results in test_results.data.items() %}
	{% for environment, entry in results.items() %}
	{% for status in entry.statuses %}
	{% if status.suite and status.has_metrics %}
	<a href="{{testrun_suite_metrics_url(project.group, project, build, status)}}" id="metrics-{{status.id}}" ng-show="match('metrics-{{status.id}}')">
	    <div class='row row-bordered'>
		<div class='col-md-3 col-sm-3' title='Metrics suite'>
		    <i class='fa fa-list'></i>
		    <strong>{{status.suite}}</strong>
		</div>

		<div class='col-md-3 col-sm-3' title='Environment'>
		    <i class='fa fa-microchip'></i>
		    {{status.environment}}
		</div>

		<div class='col-md-4 col-sm-4' title='Metrics summary'>
		    <i class='fa fa-line-chart'></i>
		    {{status.metrics_summary|floatformat(3)}}
		</div>

		<div class='col-md-2 col-sm-2' title='Test runs'>
		    <i class='fa fa-cog'></i>
		    {{status.test_run.job_id}}
		</div>
	    </div>
	</a>
	{% endif %}
	{% endfor %}
	{% endfor %}
	{% endfor %}
    </div>
</div> <!-- ng-content=FilterController -->

</div> <!-- ng-app=Filter -->

<div class='testruns highlight-row'>
    <h2>{{ _('Test runs') }}</h2>
    {% for test_run in test_results.test_runs %}
    <a href="{{url("testrun", args=[project.group.slug, project.slug, build.version, test_run.job_id])}}">
	<div class='row row-bordered'>
	    <div class='col-md-3 col-sm-3' title='{{ _('Job ID') }}'>
		<i class='fa fa-list'></i>
		<strong>{{test_run.job_id}}</strong>
	    </div>
	    <div class='col-md-3 col-sm-3' title='{{ _('Environment') }}'>
		<i class='fa fa-microchip'></i>
		{{test_run.environment}}
	    </div>

	    <div class='col-md-4 col-sm-4' title='{{ _('Date and time') }}'>
		<i class='fa fa-calendar'></i>
		{{test_run.datetime|date}}
	    </div>

	    <div class='col-md-2 col-sm-2' title='{% if test_run.completed %}{{ _('Complete') }}{% else %}{{ _('Not completed') }}{% endif %}'>
		{% if test_run.completed %}
		<i class='fa fa-check-square-o'></i>
		{% else %}
		<i class='fa fa-square-o'></i>
		{% endif %}
		{{test_run.job_status|default("")}}
	    </div>
	</div>
    </a>
    {% endfor %}
</div>


{% endblock %}

{% block javascript %}
<script type="text/javascript" src='{{static("select2.js/select2.min.js")}}'></script>
<script type="module" src='{{static("squad/build.js")}}'></script>
<script type="module" src='{{static("squad/table.js")}}'></script>
{% endblock %}

{% block styles %}
<link href='{{static("select2.js/select2.css")}}' rel="stylesheet" />
{% endblock %}
