{% extends 'base.html' %}
{% load bt %}
{% load i18n %}
{% block active_tab_home %}id="current"{% endblock %}
{% block styles %}
   <link rel="stylesheet" href="{{ MEDIA_URL }}/css/map.css" type="text/css" />
{% endblock %}

{% block head %}
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endblock %}

{% block scripts %}
  <script type="text/javascript" src="{{ MEDIA_URL }}/js/jquery.min.js"></script>
  <script type="text/javascript" src="{{ MEDIA_URL }}/js/jquery.tablesorter.js"></script>
  <script type="text/javascript" src="{{ MEDIA_URL }}/js/picnet.table.filter.min.js"></script>
  <script type="text/javascript" src='{{ MEDIA_URL }}/js/d3.min.js'></script>
  <script type="text/javascript" src='{{ MEDIA_URL }}/js/topojson.min.js'></script>
  <script type="text/javascript" src='{{ MEDIA_URL }}/js/datamaps.js'></script>
  <script type="text/javascript" src="{{ MEDIA_URL }}/js/map.js"></script>
  <script type="text/javascript">
     var data={% if countryweights %}{{countryweights|safe}}{%else%}[]{% endif %};
     var country="{{country}}";
     $(document).ready(function() {
       $.tablesorter.addParser({
           // set a unique id
           id: 'stateparser',
           is: function(s) {
               // return false so this parser is not auto detected
               return false;
           },
           format: function(s) {
               // format your data for normalization
               return s{% for s, translation in status %}.replace(/{{translation}}/,{{forloop.counter}}){% endfor %};
           },
           // set type, either numeric or text
           type: 'numeric'
       });
       $("#sortedlist").tablesorter({
           headers: { 8: { sorter: false },
                      0: { sorter: 'stateparser' }},
           sortList: [[1,0],[0,0],[7,1]],
       });
       var options = { enableCookies: false };
       $('#sortedlist').tableFilter(options);
       $('.confirm_form').submit(function() {
          var self=this;
          var email=$(this).find('input:first').attr('value');
          if( email.length>0) {
             $.ajax({url: '/confirm/'+$(this).attr('id').slice(1)+'/'+email, success: function(data) { $(self).html(data); }});
          } else {
             $(this).find('[type=text]').focus();
          }
          return false;
       });
       $(".confirm > .button").click(function(){
                $(this).parent().parent().parent().find('.info-validate').toggle();
             });
       $(".cancel-button").click(function(){
                $(this).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 %}
{% trans "Search through cases" %}
<div id="map"> </div>
    <form method="get" action=".">
        <table>
            {{ form.as_table }}
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" value="Search">
                </td>
            </tr>
        </table>
    </form>

        {% if query %}
            <h3>Results</h3>

	    <table class="listing tablesorter zebra-striped" id='sortedlist'>
		    <thead>
			    <tr>
				   <th filter-type='ddl'>{% trans "Status" %}</th>
				   <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 result in page.object_list %}
            <tr class="{%if result.object.state%}{{result.object.state}}{%else%}new{%endif%}-status">
    <td><a class="cell-link" href="{{ result.object.get_absolute_url }}">{%if result.object.state%}{{result.object.state|status}}{%else%}{% trans "New" %}{%endif%}</a></td>
    <td><a class="cell-link" href="{{ result.object.get_absolute_url }}">{{ result.object.country|country }}</a></td>
    <td><a class="cell-link" href="{{ result.object.get_absolute_url }}">{{ result.object.operator }}</a></td>
    <td><a class="cell-link" href="{{ result.object.get_absolute_url }}">{{ result.object.contract }}</a></td>
    <td><a class="cell-link" href="{{ result.object.get_absolute_url }}">{{ result.object.resource_name }}</a></td>
    <td><a class="cell-link" href="{{ result.object.get_absolute_url }}">{{ result.object.type|type }}</a></td>
    <td><a class="cell-link" href="{{ result.object.get_absolute_url }}">{{ result.object.media|media }}</a></td>
    <td>{{ result.object.confirmations }}</td>
   <td>
      <div class="confirm"><a class="button">{% trans "Me too!" %}</a>
	 <div class="info-validate float-confirm">
            <form method="get" action="" id="i{{ violation.pk }}" class="confirm_form" >
               <div>
                  <label>{% trans "In order to <strong>confirm</strong> this report, please enter your email address" %}</label>
                  <input type="text" name="email" />
                  <input type="hidden" value="{{ violation.pk }}" />
                  <input type="submit" value="{% trans "OK" %}" />
               </div>
            </form>
            <input class="cancel-button" type="button" value="{% trans "Close" %}" />
         </div>
      </div>
    </td>
	    </tr>
            {% endfor %}
	  </tbody>
	    </table>

            {% if page.has_previous or page.has_next %}
                <div>
                    {% if page.has_previous %}<a href="?q={{ query }}&amp;page={{ page.previous_page_number }}">{% endif %}&laquo; Previous{% if page.has_previous %}</a>{% endif %}
                    |
                    {% if page.has_next %}<a href="?q={{ query }}&amp;page={{ page.next_page_number }}">{% endif %}Next &raquo;{% if page.has_next %}</a>{% endif %}
                </div>
            {% endif %}
        {% else %}
            {# Show some example queries to run, maybe query syntax, something else? #}
        {% endif %}
</div>
{% endblock %}