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

{% block content %}
<h1>{{ _('Compare project') }}s</h1>

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

  {% include "squad/_results_table.jinja2" %}

  {% with items=comparison.results %}
    {% include "squad/_pagination.jinja2" %}
  {% endwith %}
{% endif %}
<div class="row">
  <div class="col-md-6 col-sm-6" ng-app="ProjectCompare" ng-controller="ProjectCompareController" ng-init="init()">
    <form id="compare-projects-form">
      <div class="form-group">
        <h2>{{ _('Group') }}</h2>
        <select
          name="group"
          id="group-select"
          placeholder="{{ _('Enter group name') }}"
          onchange="window.location='{{request.path}}?group=' + this.value"
          class="form-control"
        >
          {% if group %}
            <option id="{{group.slug}}">{{ group.slug }}</option>
          {% endif %}
        </select>
      </div>
      {% if group %}
        <h2>{{ _('Select projects to compare') }}</h2>
        {% for project in projects %}
        {% set project_key = 'project_%d' % project.id %}
        {% set version = request.GET.get(project_key, project.builds.first().version) %}
        <div class="checkbox form-group">
          <label>
            <input
              type='checkbox'
              ng-model="projects[{{project.id}}]"
              ng-init="projects[{{project.id}}] = {{ string(project_key in request.GET)|lower }}"
            />
            {{project.slug}}
          </label>
          <div class="select-build" ng-show="projects[{{project.id}}]">
            <select
              id="{{project_key}}"
              name="{{project_key}}"
              placeholder="{{ _('Enter build version') }}"
              ng-init="attachSelect2('{{project_key}}', {{project.id}})"
            >
              {% if version %}
              <option id="{{ version }}">{{ version }}</option>
              {% endif %}
            </select>
          </div>
        </div>
        {% endfor %}
        <div class="form-group">
          <label>{{ _('Comparison type') }}</label>
          <div>
            <input id="test-comparison" name="comparison_type" type="radio" value="test" checked="checked"/>
            <label for="test-comparison">{{ _('compare by tests') }}</label>
            <br />
            <input id="metric-comparison" name="comparison_type" type="radio" value="metric" />
            <label for="metric-comparison">{{ _('compare by metrics') }}</label>
          </div>
        </div>
        <div class="form-group">
          <input ng-click="submit()" value="{{ _('Compare') }}" type="button" class="btn btn-default" />
        </div>
      {% endif %}
    </form>
  </div>
</div>
{% endblock %}
{% block javascript %}
<script type="text/javascript" src='{{static("squad/table.js")}}'></script>
<script type="text/javascript" src='{{static("select2.js/select2.min.js")}}'></script>
<script type="module" src='{{static("squad/project_compare.js")}}'></script>
{% endblock %}

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