{% extends "base.html" %}

{% load i18n %}
{% load static from staticfiles %}

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{% static 'accounting/css/classes.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'hr/css/classes.css' %}" />
{% endblock %}

{% block headtitle %}{% trans 'Contracts' %}{% endblock %}



{% block main_content %}
<div class="page-header">
    <h1>Contracts <small>last update {{ scan_date|ecm_datetime }}</small></h1>
</div>

<form id="search_form" class="form-search form-inline">
  <div class="btn-toolbar" >
    <input type="text" id="search_text" class="input-medium search-query" value="" />
    <div class="btn-group">
      <a class="btn btn-small" id="search_button"><i class="icon-search"></i>{% trans 'Search' %}</a>
      <a class="btn btn-small" id="clear_search">{% trans 'Reset' %}</a>
    </div>
    <div class="control-group success" style="display: inline;">
      <span class="label label-success">{% trans 'Type' %}</span>
      <select id="type_selector">{% for id, name, selected in types %}
            <option value="{{ id }}"{% if selected %} selected{% endif %}>{{ name }}</option>
      {% endfor %}</select>
    </div>
    <div class="control-group error" style="display: inline;">
      <span class="label label-important">{% trans 'Status' %}</span>
      <select id="status_selector">{% for id, name, selected in statuses %}
            <option value="{{ id }}"{% if selected %} selected{% endif %}>{{ name }}</option>
      {% endfor %}</select>
    </div>
  </div>
</form>

<table class="table table-bordered table-condensed" id="contract_table">
  <thead>
    <tr>{% for name, width, type, sortable, css in columns %}
      <th>{{name}}</th>
    {% endfor %}</tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="12" class="dataTables_empty">{% trans 'Loading data from server...' %}</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>{% for name, width, sortable, css, type in columns %}
      <th>{{name}}</th>
    {% endfor %}</tr>
  </tfoot>

</table>
{% endblock %}





{% block post_javascripts %}
<script>
$(document).ready(function() {
    var table = $('#contract_table').dataTable($.extend(true, {}, DATATABLE_DEFAULTS, {
        sAjaxSource: "/accounting/contracts/data/",
        aoColumns: [{% for name, width, type, sortable, css in columns %}
            { /* {{name}} */ sWidth: '{{width}}', sType: '{{type}}', bSortable: {{sortable}}, sClass: '{{css}}' },
        {%endfor%}],

        /* this function will be called when the table has to query data to be displayed */
        fnServerData: function ( sSource, aoData, fnCallback ) {
            /* Add some extra variables to the url */
            aoData.push( {
                name: "type",
                value: $("#type_selector option:selected").val()
            },{
                name: "status",
                value: $("#status_selector option:selected").val()
            } );

            $.getJSON( sSource, aoData, function (json) {
                fnCallback(json)
            } );
        },
    }));

  /* trigger the search when pressing return in the text field */
    $("#search_form").submit(function(event) {
        event.preventDefault();
        table.fnFilter($("#search_text").val());
    });

    /* trigger the search when clicking the "search" button */
    $("#search_button").click(function() {
        table.fnFilter($("#search_text").val());
    });

    /* reset the search when clicking the "reset" button */
    $("#clear_search").click(function() {
        $("#search_text").val("");
        table.fnFilter("");
    });

    $("#type_selector").change(function () {
        table.fnDraw();
    });

    $("#status_selector").change(function () {
        table.fnDraw();
    });

    /* disable multi column sorting */
    $('#contract_table thead th').click(function(event) {
        if (!$(event.target).hasClass('sorthandle')) {
            event.shiftKey = false;
        }
    });

} );
</script>
{% endblock %}