{% extends "scrutiny/base.html" %}
{% load tags %}

{% block appbar %}
  <h2>{{ project.title }}</h2>
{% endblock %}

{% block content %}
  <div>

    <table class="installed-versions">
      <thead>
        <td></td>
        {% for platform in platforms %}
          <th>{{ platform.title }}</th>
        {% endfor %}
      </thead>
      <tbody>
        {% for service in services %}
          <tr class="service">
            <th>{{ service.title }}</th>
            {% for platform in platforms %}
              <td class="service-link"><a href="{% service_url platform=platform service=service %}"
                                          class="icon-external-link"></a></td>
            {% endfor %}
          </tr>
          {% for module in service.get_modules_with_version %}
            <tr class="module">
              <th>{{ module.0.name }}</th>
              {% for platform in platforms %}
                <td class="version">{{ module.1|get:platform.id|default:"" }}</td>
              {% endfor %}
            </tr>
          {% endfor %}
        {% endfor %}
      </tbody>
    </table>

  </div>

  <button id="diff">Diff</button>
  <button id="issues">Issues</button>
  <a class="button" href="{% url 'project-history' slug=project.slug %}">History</a>

{% endblock %}


{% block page-end %}
  <script>
    function start_diff() {
      $('td.version:not(:empty)').removeClass('selected').addClass('selectable').click(function() {
        $('#diff').data('commit-1', $(this).text());
        $('td.version').removeClass('selectable').unbind('click');
        $(this).parent().find('td.version').addClass('selectable').click(function() {
          $('td.version').removeClass('selected').removeClass('selectable');
          window.location = '../modules/' + $(this).parent().find('th').text() +
          '/diff/' + $('#diff').data('commit-1') + '/' + $(this).text();
        });
        $(this).addClass('selected').removeClass('selectable').unbind('click');
      });
    }

    function start_issues() {
      $('td.version:not(:empty)').removeClass('selected').addClass('selectable').click(function() {
        $('#issues').data('commit-1', $(this).text());
        $('td.version').removeClass('selectable').unbind('click');
        $(this).parent().find('td.version').addClass('selectable').click(function() {
          $('td.version').removeClass('selected').removeClass('selectable');
          window.location = '../modules/' + $(this).parent().find('th').text() +
          '/issues/' + $('#issues').data('commit-1') + '/' + $(this).text();
        });
        $(this).addClass('selected').removeClass('selectable').unbind('click');
      });
    }

    $(function() {
      $('#diff').click(start_diff);
      $('#issues').click(start_issues);
      $('td.version').each(function() {
        if ($(this).text() == $(this).next().text()) {
          $(this).addClass('dim');
        }
      });
    });
  </script>
{% endblock %}
