{% load i18n %}

<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="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>

{% if gallery or use_map %}
{% include "blocks/DataTables-tabs.html" %}
{% else %}
{% include "blocks/DataTables-content.html" %}
{% endif %}

<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;
});

{% if gallery or use_map %}
$("#tab-grid-{{name}}").click(function(){
    current_tab = "table";
    datatable_submit_search();
});
{% endif %}
{% if gallery %}
$("#tab-gallery-{{name}}").click(function(){
    current_tab = "gallery";
    gallery_submit_search();
});
{% endif %}
{% if use_map %}
$("#tab-map-{{name}}").click(function(){
    current_tab = "map";
    map_submit_search();
});
{% endif %}


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

{% if gallery %}
gallery_submit_search = function(image_page){
    if (image_page) {
        current_image_page = image_page;
    } else {
        current_image_page = 1;
    }
    $('.modal-progress').modal('show');
    var data = search_get_query_data(query_vars, "{{name}}");
    var nb_select = jQuery("#id_{{name}}-length_image").val();
    if (!nb_select) nb_select = 10;

    var url = "{{source}}json-image?length=" + nb_select + "&submited=1&" + data;
    $.getJSON(url, function(data) {
        var timestamp = Math.floor(Date.now() / 1000);
        var gallery_id = "gallery-" + timestamp;
        $("#tab-content-gallery-{{name}}").html(
            render_gallery(data, "{{name}}", nb_select, gallery_id));
        $("#id_{{name}}-length_image").change(gallery_submit_search);
        register_image_gallery(gallery_id);
        $('.card[data-toggle="tooltip"]').tooltip();
        if ($('.modal-progress').length > 0){
            $('.modal-progress').modal('hide');
        }
    });
    return false;
};
{% endif %}
{% if use_map %}
map_submit_search = function(){
    var modal_base_text = $('.modal-progress .modal-header').html();
    $('.modal-progress .modal-header').html("{% trans 'Fetching data...' %}");
    $('.modal-progress').modal('show');
    var data = search_get_query_data(query_vars, "{{name}}");
    var nb_select = jQuery("#id_{{name}}-length_map").val();
    if (!nb_select) nb_select = 10;

    var url = "{{source}}json-map?length=" + nb_select + "&submited=1&" + data;
    var use_map_limit = false;
    if(data.indexOf("no_limit=true") == -1){
        url += "&limit=" + current_map_limit;
        use_map_limit = true;
    }
    $.getJSON(url, function(data) {
        var timestamp = Math.floor(Date.now() / 1000);
        var map_id = "map-" + timestamp;
        $('.modal-progress .modal-header').html("{% trans 'Render map...' %}");

        var html = render_map(map_id, use_map_limit);
        $("#tab-content-map-{{name}}").html(html);
        $("#id_{{name}}-length_map").change(map_submit_search);
        if ($('.modal-progress').length > 0){
            $('.modal-progress').modal('hide');
            $('.modal-progress .modal-header').html(modal_base_text);
        }
        register_map(map_id, data);
    });

    return false;
};
{% endif %}

datatable_submit_search = function(not_submited){
    var data = search_get_query_data(query_vars, "{{name}}");
    var mygrid = jQuery("#grid_{{name}}");
    var url = "";
    if (!not_submited){
        url = "{{source}}?submited=1&" + data;
    } else {
        url = "{{source}}?" + data;
    }

    datatable_{{sname}}.ajax.url(url);
    datatable_{{sname}}.draw();

    setTimeout(  // wait for modal-progress to be loaded on the page
        function(){
            $('.modal-progress').modal('show');
        }, 50
    );

    return false;
};

update_submit_args = function(){
    var data = search_get_query_data(query_vars, "{{name}}");
    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 %}
};


jQuery(document).ready(function(){
  jQuery("#search_{{name}}").click(
    main_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);
            update_submit_args();
            setTimeout(  // 50ms is waited on load so...
                function(){
                    $('.modal-progress').modal('hide');
                }, 50);
            return json.rows;
        }
    },
    "deferLoading": 0,
    "select": {
        "style": {% if multiple_select or quick_actions %}'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 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' %}"
        }
    ],
    "dom": 'liBtp',
    {% else %}
    "dom": 'litp',
    {% 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 %}
    ],
     "initComplete": function(settings, json) {
        var api = new $.fn.dataTable.Api(settings);
        {% if not multiple_select %}dt_single_enable_disable_submit_button(null, api);
        {% else %}dt_multi_enable_disable_submit_button(null, api);{% endif %}
     }
  };

  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);

  {% if not multiple_select %}
  datatable_{{sname}}.on('select', dt_single_enable_disable_submit_button);
  datatable_{{sname}}.on('deselect', dt_single_enable_disable_submit_button);
  {% else %}
  datatable_{{sname}}.on('select', dt_multi_enable_disable_submit_button);
  datatable_{{sname}}.on('deselect', dt_multi_enable_disable_submit_button);
  {% endif %}

{% 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 (typeof data[k]['id'] != "undefined") {
            if (value) value += ",";
            value += data[k]['id'];
        }
    }
    {% else %}
    var value = data[0]['id'];
    {% endif %}
    jQuery("#hidden_{{name}}").val(value);
    return true;
  });
{% endif %}
  datatable_submit_search(true);
});

  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>