{% 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();
     $('#sortedlist').tableFilter();
     $('.confirm_form').submit(function() {
       var self=this;
       var email=$(this).find('input:first').attr('value');
       if(email) {
          $.ajax({url: '/confirm/'+$(this).attr('id')+'/'+email, success: function(data) { $(self).html(data); }});
       } else {
          $(this).parent().find('.email-box').css('color','red');
       };
       return false;
     });
     $(".confirm > .button").click(function(){
            $(this).next().toggleClass('hidden');
         });
     $(".cancel-button").click(function(){
            $(this).parent().parent().parent().parent().addClass('hidden');
         });
   });
  </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 and validated violations of net neutrality. See <a href='/about'>What is net neutrality</a> for a short explanation. See <a href='/about/'>About</a> for more information on how violations are reported and validated." %}</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>
</tr>
  </thead>
  <tbody>
{% for violation in violations %}
<tr>
    <td><a class="cell-link" href="/view/{{violation.pk}}">{{ violation.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 }} <div class="confirm"><a class="button">+1</a>
      <div class="hidden confirm_popup alpha60">
         <div>
            <h3>{% trans "Confirmation" %}</h3>
            <div>
            <small>{% trans "I attest the existence of this infringement" %}<br />
            <a href="/view/{{violation.pk}}">{{ violation.operator }} ({{ violation.country }}) {{ violation.contract }}</a></small>
            <form method="get" class="confirm_form" id="{{ violation.pk }}">
               <div class="email-box">{% trans "E-mail" %}: <input type="text" name="email" /></div>
               //{% trans "required" %}<br />
               <input type="hidden" value="{{ violation.pk }}" />
               <input type="submit" value="confirm" />
               <input class="cancel-button" type="button" value="{% trans "cancel" %}" />
            </form>
            </div>
         </div>
      </div>
    </td>
</tr>
{% endfor %}
  </tbody>
</table>
</div>
{%endblock%}