{% load i18n %}

<p class="text-center">

<button id='search_{{name}}' class='btn btn-primary search_button'
        type="button">
    {% trans "Search" %}</button>

{% if url_new %}
<p><a href="#" onclick="open_window('{{url_new}}');">{{new_message}}</a></p>
{% endif %}

<div class="alert alert-info" role="alert" id="pinned_search_{{name}}">
    <i class="fa fa-thumb-tack"></i> &nbsp;
    <strong>{% trans "Pinned search:" %}</strong>
    <em><span id="pinned_search_content_{{name}}"></span></em>
</div>

<div class="modal fade table-modal-lg" tabindex="-1" role="dialog"
     aria-hidden="true" id="modal_grid_{{name}}">
  <div class="modal-dialog full modal-lg">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <div class="current-sheets"></div>
          <div class="current-grid"></div>
      </div>
    </div>
  </div>
</div>

<div id="grid_{{name}}_meta_wrapper">
    <table id='grid_{{name}}' class="display" width="100%">
        <thead>
        <tr>
            <th></th>
            <th></th>{% for col in col_names %}
            <th>{{col}}</th>
        {% endfor %}</tr>
        </thead>
    </table>
</div>

<div id='foot_{{name}}' class="gridfooter row toolbar">
    <div class='col-md-2'>
        <div class="btn-group btn-group-sm" role="group">
            <button type='button' class="btn btn-secondary" data-toggle="modal"
                    data-target="#modal_grid_{{name}}">
                {% trans "Expand table" %} <i class="fa fa-expand" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <div class='col-md-2'>
        <div class="btn-group btn-group-sm" role="group"
             aria-label="{% trans 'Export'%}">
            {% if source_full or extra_sources %}
            <a class="btn btn-secondary" href='{{source}}csv' target='_blank'
               title="{% trans 'Export as CSV - ' %}{% trans 'simple'%}">{% trans "Simple CSV" %}</a>
            {% if source_full %}<a class='btn btn-secondary' href='{{source_full}}csv' target='_blank' title="{% trans 'Export as CSV - full' %}">{% trans "CSV full" %}</a>{% endif %}
            {% for slug, name, extra_source in extra_sources %}
            <a class="btn btn-secondary" href='{{extra_source}}csv' target='_blank' title="{% trans 'Export as CSV - ' %}{{name}}">{{name}}</a>
            {% endfor %}
            {% else %}
            <a class="btn btn-secondary" href="{{source}}csv" target="_blank" title="{% trans 'Export as CSV' %}">{% trans "CSV" %}</a>
            {% endif %}
        </div>
    </div>
</div>

{% if multiple %}
<input type="button" id="add_button_{{name}}" value="{% trans 'Add' %}"/>
<ul id="selectmulti_{{name}}" class="selectmulti"></ul>
{% endif %}

<input type="hidden" id="hidden_{{name}}" name="{{name}}"/>

<script type="text/javascript" language='javascript'>
$('#modal_grid_{{name}}').on('show.bs.modal', function (e) {
    $('#grid_{{name}}_wrapper').appendTo(
        '#modal_grid_{{name}} .modal-body .current-grid');
    $('#window').appendTo(
        '#modal_grid_{{name}} .modal-body .current-sheets');
    $('#grid_{{name}}').DataTable().clear().draw();
    current_modal = $("#modal_grid_{{name}}");
});

$('#modal_grid_{{name}}').on('hide.bs.modal', function (e) {
    $('#grid_{{name}}_wrapper').appendTo(
        '#grid_{{name}}_meta_wrapper');
    $('#window').appendTo('#window_wrapper');
    $('#grid_{{name}}').DataTable().clear().draw();
    current_modal = null;
});


var query_vars = new Array({{col_idx|safe}});
var selItems_{{sname}} = new Array();


datatable_submit_search = function(){
    $("#id_search_vector").removeClass('input-progress');
    if ($('.modal-progress').length > 0){
        $('.modal-progress').modal('show');
    }
    var data = "";
    for (idx in query_vars){
        var key = query_vars[idx];
        var item = jQuery("#id_"+key);
        var val = null;
        if (item.prop('type') == 'checkbox'){
            if (item.prop('checked')){
                var val = item.val();
            }
        } else {
            var val = item.val();
        }
        if (val){
            if (data) data += "&";
            data += key + "=" + encodeURIComponent(val);
        }
    }
    var mygrid = jQuery("#grid_{{name}}");
    var url = "{{source}}?submited=1&" + data;
    datatable_{{sname}}.ajax.url(url).load();
    var csv_url = "{{source}}csv?submited=1&" + data;
    $(".{{sname}}-csv").attr("href", csv_url);
    var csv_full_url = "{{source_full}}csv?submited=1&" + data;
    $(".{{sname}}-csv-full").attr("href", csv_full_url);
    {% for slug, name, extra_source in extra_sources %}
    $(".{{slug}}-csv-full").attr("href", '{{extra_source}}csv?submited=1&' + data);
    {% endfor %}

    if ($('.modal-progress').length > 0){
        $('.modal-progress').modal('hide');
    }
    return false;
};



jQuery(document).ready(function(){
  jQuery("#search_{{name}}").click(datatable_submit_search);

  var base_source = "{{source}}";

  if (default_search_vector){
    base_source += "?search_vector=" + default_search_vector + "&submited=1";
  }

  datatable_options = {
    "ajax": {
        "url": base_source,
        "dataSrc": function (json) {
            manage_pinned_search("{{name}}", json);
            return json.rows;
        }
    },
    "select": {
        "style": {% if multiple_select %}'multi'{% else %}'single'{% endif %}
    },
    {% if multiple_select or quick_actions %}"buttons": [
        {% for url, title, icon, target in quick_actions %}
        {
            {% if target == 'one' %}extend: 'selectedSingle',
            {% elif target == 'many' %}extend: 'selected',
            {% endif %}
            className: "btn btn-success",
            text: "{{icon}}",
            titleAttr: "{{title}}",
            action: function (e, dt, node, config) {
                var url = dt_generate_qa_url(dt, "{{url}}");
                dt_qa_open(url);
                return false;
            }
        },
        {% if not forloop.last %},{% endif %}
        {% endfor %}{% if multiple_select %}{% if quick_actions%},{% endif %}
        {
            extend: 'selectAll',
            text: '<i class="fa fa-check-circle-o"></i>',
            titleAttr: "{% trans 'Select all items' %}"
        },
        {
            extend: 'selectNone',
            text: '<i class="fa fa-times"></i>',
            titleAttr: "{% trans 'Deselect' %}"
        }
        {% endif %}
    ],
    "dom": 'lBtip',
    {% else %}
    "dom": 'ltip',
    {% endif %}
    "columns": [
        { "data": "id", "visible": false },
        { "data": "link", "orderable": false },{% for col in extra_cols %}
        { "data": "{{col}}", "defaultContent": "-",
          "render": $.fn.dataTable.render.ellipsis( 70, true ) }{% if not forloop.last %},{% endif %}{% endfor %}
    ]
  };

  if (!debug) $.fn.dataTable.ext.errMode = 'none';

  $.extend(datatable_options, datatables_default);
  if (datatables_i18n) datatable_options['language'] = datatables_i18n;
  datatable_{{sname}} = jQuery("#grid_{{name}}").DataTable(datatable_options);

{% comment %}

  jQuery("#grid_{{name}}").jqGrid({
    url:'{{source}}',
    datatype: "json",
    mtype: 'GET',
    colNames:['id', '', {{col_names|safe}}],
    colModel:[
      {name:'id', index:'id', hidden:true},
      {name:'link', index:'link', width:30},
      {{extra_cols|safe}}
    ],
    height: 300,
    sortname: '__default__',
    viewrecords: true,
    sortorder: "asc",
    emptyrecords: "{{no_result}}",
    loadtext: "{{loading}}",
    pager: '#pager_{{name}}',
    width: null,
    shrinkToFit: false,
    rowNum:20,
    {% if multiple_select %}multiselect: true,{% endif %}
    jsonReader : {repeatitems: false},
    loadError: function (jqXHR, textStatus, errorThrown) {
        alert("{% trans "An error as occured during search. Check your query fields." %}");
    },
    beforeProcessing: function(data, status, xhr){
        $('#pinned_search_content_{{name}}').html('');
        for (idx in data){
            if (idx == 'pinned-search' && data[idx] != ''){
               $('#pinned_search_content_{{name}}').html(data[idx]);
            }
        }
        if ($('#pinned_search_content_{{name}}').html()){
            $('#pinned_search_{{name}}').show();
        } else {
            $('#pinned_search_{{name}}').hide();
        }
    }
  });
{% endcomment %}

{% if multiple %}
  jQuery("#add_button_{{name}}").click(function (){
    var mygrid = jQuery("#grid_{{name}}");
    var idx = mygrid.getGridParam('selrow');
    var lbl_cols = new Array({{multi_cols|safe}});
    var label = "";
    for (var id in lbl_cols){
        if(id == 1){
            label += " (";
        }else if (id > 1){
            label += " ; ";
        }
        label += mygrid.getCell(idx, lbl_cols[id]);
    }
    if (id > 0){
        label += ")";
    }
    for (id in selItems_{{sname}}){
        if(selItems_{{sname}}[id] == idx){
            return false;
        }
    }
    selItems_{{sname}}.push(idx);
    jQuery("#selectmulti_{{name}}").append(
               "<li id='selected_{{name}}_"+idx+"'>\
<a href='#' class='remove' \
  onclick=\"multiRemoveItem(selItems_{{sname}}, '{{name}}', "+ idx +");\
  return false;\" title=\"{{remove}}\">X</a>" + label + "</li>");
    return true;
  });
  jQuery("#submit_form").click(function (){
    jQuery("#hidden_{{name}}").val(selItems_{{sname}});
    return true;
  });
{% else %}
  jQuery("#submit_form").click(function (){
    var data = datatable_{{sname}}.rows( { selected: true } ).data();
    {% if multiple_select %}
    var value = "";
    for (k in data){
        if (k > 0) value += ",";
        value += data[k]['id'];
    }
    {% else %}
    var value = data[0]['id'];
    {% endif %}
    jQuery("#hidden_{{name}}").val(value);
    return true;
  });
{% endif %}

});

  function get_next_table_id(c_id){
    var has_current_id = false;

    ids = datatable_{{sname}}.column(0).data();
    for (idx=0 ; idx < ids.length; idx++){
        if (has_current_id) return ids[idx];
        if (ids[idx] == c_id) has_current_id = true;
    }
    return false;
  }
  function get_previous_table_id(c_id){
    var previous_id = 0;

    ids = datatable_{{sname}}.column(0).data();
    for (idx in ids){
        if (ids[idx] == c_id){
            if (previous_id) return previous_id;
            return false;
        }
        previous_id = ids[idx];
    }
    return false;
  }
</script>