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

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

{% block content %}
  <div>

    <table class="history">
      <thead>
        <tr>
          <th>Platform</th> <th>Service</th> <th>Datetime</th> <th>Module</th>
          <th>Old version →</th> <th>New version</th>
        </tr>
      </thead>
      <tbody>
        {% for v in installed_versions %}
          <tr class="
                     {% if not v.version.version %}uninstall{% endif %}
                    ">
            <td class="platform">{{ v.service.platform.title }}</td>
            <td class="service">{{ v.service.service.title }}</td>
            <td class="datetime">{{ v.timestamp }}</td>
            <td class="module">{{ v.version.module.name }}</td>
            <td class="version">{{ v.get_previous_version.version.version }}</td>
            <td class="version">{{ v.version.version }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>

  </div>

  <div class="buttons">
    <button id="diff">Diff</button>
    <button id="issues">Issues</button>
  </div>

  <p class="note">
    Note: It is possible to click on cell content to filter on that value.
  </p>

{% 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('td.module').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('td.module').text() +
          '/issues/' + $('#issues').data('commit-1') + '/' + $(this).text();
        });
        $(this).addClass('selected').removeClass('selectable').unbind('click');
      });
    }

    $(function() {
      $('#diff').click(start_diff);
      $('#issues').click(start_issues);
      $('table tbody td').click(function() {
        var value = $(this).text();
        var index = $(this).index();
        $('td.platform, td.service, td.datetime, td.module').each(function(idx, elem) {
          if ($(this).text() !== value && $(this).index() == index) {
            $(this).parents('tr').hide();
          }
        });
      });
    });
  </script>
{% endblock %}
