{% extends "base.html" %}
{% load bt %}
{% load i18n %}
{% block styles %}
{% endblock %}
{% block scripts %}
  <script type="text/javascript" src="{%media_url%}/js/jquery.1.4.2.min.js"></script>
  <script type="text/javascript" src="{%media_url%}/js/jquery.tablesorter.min.js"> </script>
  <script type="text/javascript" src="{%media_url%}/js/picnet.table.filter.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
     $("#sortedlist").tablesorter({ headers: { 7: { sorter: false }, }});
     $('#sortedlist').tableFilter();
     $('.confirm_form').submit(function() {
        var self=this;
        $.ajax({url: '/confirm/'+$(this).attr('id')+'/'+$(this).children('input:first').attr('value'), success: function(data) { $(self).html(data); }});
        return false;
     });
     $(".confirm > .button").click(function(){
              $(this).parent().parent().parent().find('.info-validate').toggle();
           });
     $(".cancel-button").click(function(){
              $(this).parent().parent().hide();
           });
     });
  </script>
{% endblock %}

{%block content%}
<div id='global'>
{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}
<p>{% trans "This is a list of all reported violations of net neutrality. See <a href='/about'>What is net neutrality</a> for a short explanation. " %}</p>
<table class="listing tablesorter" id='sortedlist'>
  <thead>
<tr>
   <th filter-type='ddl'>{% trans "country" %}</th>
   <th filter-type='ddl'>{% trans "operator" %}</th>
   <th filter-type='ddl'>{% trans "contract" %}</th>
   <th filter-type='ddl'>{% trans "resource" %}</th>
   <th filter-type='ddl'>{% trans "type" %}</th>
   <th filter-type='ddl'>{% trans "fixed / wireless" %}</th>
   <th filter='false'>{% trans "confirmations" %}</th>
   <th filter='false'></th>
</tr>
  </thead>
  <tbody>
{% for violation in violations %}
<tr>
    <td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.country|country }}</a></td>
    <td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.operator }}</a></td>
    <td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.contract }}</a></td>
    <td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.resource }}</a></td>
    <td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.type }}</a></td>
    <td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.media }}</a></td>
    <td>{{ violation.confirmations }}</td>
   <td>
    <div class="confirm"><a class="button">+1</a>
    <div class="info-validate float-confirm">
      <form method="get" id="{{ violation.pk }}" class="confirm_form" >
          <label>{% trans "In order to <strong>validate your
                confirmation</strong> of this case, please enter your email address" %}</label>
          <input type="text" name="email" />
          <input type="hidden" value="{{ violation.pk }}" />
          <input type="submit" value="{% trans "confirm" %}" />
          <input class="cancel-button" type="button" value="{% trans "cancel" %}" />
       </form>
     </div>
    </td>
</tr>
{% endfor %}
  </tbody>
</table>
</div>
{%endblock%}