{% load i18n %}
<div class="dashboard-table-container pb-2 bg-white " style="width: {{options.width}};" >
  {% if form.is_visible %}
  <form class='form' action='{{form.url}}' method='post'>
  {% endif %}
  <div class="{{name}}-controls {% if not options.hide_controls or form.is_visible %}border-bottom pb-3{% endif %}">
    {% csrf_token %}
    <div class="d-flex justify-content-between align-items-center">
      {% if not options.hide_controls %}
      <div class='table-control-container'>
        <button
          class="btn btn-outline-secondary table-controls-button"
          type="button"
          data-bs-toggle="modal"
          data-bs-target="#{{name}}__controls_modal"
          aria-controls="{{name}}__controls_modal"
        >
          <span class="bi-funnel me-2"></span>View/Filter
        </button>
      </div>
      {% endif %}

      {% if form.is_visible %}
      <div class='action-form-container'>
          <div class="d-flex align-items-center justify-content-between"> <!-- action select and button -->
              <label class='me-2' for='action'>Actions:</label>
              <select class='form-control me-2' name='action'>
                  <option value='none'>---</option>
                  {% for action in form.actions %}
                      <option value='{{action.0}}'>{{action.1}}</option>
                  {% endfor %}
              </select>
              <input type='submit' class='btn btn-primary' value='Go'>
          </div> <!-- end action select and button -->
      </div>
      {% endif %}

    </div>
    {% if not options.hide_controls %}
    <div
      class="modal fade wildewidgets-table-controls-modal"
      id="{{name}}__controls_modal"
      tabindex="-1"
      aria-labelledby="{{name}}__controls_modal_label"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="{{name}}__controls_modal_label">Table Controls</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="d-flex justify-content-start">
              <div
                id="{{name}}__columns"
              >
                <h4>Columns</h4>
                <div role="group" aria-label="Show/Hide Columns">
                  {% for key,item in header.items %}
                    {% if item.verbose_name.strip %}
                    <div class="form-check form-switch">
                      <input
                        class="form-check-input toggle-vis"
                        type="checkbox"
                        role="switch"
                        id="{{name}}__column_{{forloop.counter0}}"
                        data-column="{{forloop.counter0}}"
                        {% if item.visible %}checked{% endif %}
                      >
                      <label class="form-check-label" for="{{name}}__column_{{forloop.counter0}}">
                        {{item.verbose_name}}
                      </label>
                    </div>
                    {% endif %}
                  {% endfor %}
                </div>
              </div>

              {% if has_filters %}
              <div
                id="{{name}}__filters"
                class="ms-5 border-start ps-3"
              >
                <h4>Filters</h4>
                <div role="group" aria-label="Search Filters">
                  {% for batch in filters %}
                    {% with field_counter=forloop.counter0 filter=batch.1 item=batch.0 %}
                      {% if filter %}
                      <div class="dropdown mb-3">
                        <button
                          id="{{name}}__{{item.field}}-group"
                          type="button"
                          data-bs-toggle="dropdown"
                          data-bs-boundary="viewport"
                          aria-haspopup="true"
                          aria-expanded="false"
                          class="btn btn-lightx borderx dropdown-toggle {% if filter.default %}active{% endif %}"
                          {% if filter.default %}data-default="{{filter.default_value}}"{% endif %}
                        >
                          <span class="me-2">{{item.verbose_name}}:</span>
                          <span class="filter-target">
                            {% if filter.default %}
                              {{filter.default_label}}
                            {% else %}
                              Any
                            {% endif %}
                          </span>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="{{name}}__{{item.field}}-group">
                          <h6 class="dropdown-header">Filter by {{item.verbose_name}}?</h6>
                          {% for choice in filter.choices %}
                            <button
                              type="button"
                              class="dropdown-item {% if choice.1 == filter.default_value %}active{% endif %}"
                              data-column="{{field_counter}}"
                              data-search="{{choice.1}}"
                            >
                              {{choice.0}}
                            </button>
                          {% endfor %}
                        </div>
                      </div>
                      {% endif %}
                    {% endwith %}
                  {% endfor %}
                </div>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div> <!-- end table controls -->

  <table id="{{name}}" class="wildewidgets-table table {{options.small|yesno:'table-sm,,'}} {{options.striped|yesno:'stripe,,'}} {{name}}" style="width: {{options.width}}; overflow-x:auto;">
    <thead>
      <tr>
        {% for key,item in header.items %}
          <th>
            {% if has_form_actions and key == 'checkbox' and options.has_select_all %}
              <input type="checkbox" id="{{name}}-select-all" aria-label="Select all">
            {% else %}
              {{item.verbose_name|safe}}
            {% endif %}
          </th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
        <tr>
        {% for column in row %}
          <td>{{column|safe}}</td>
        {% endfor %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if form.is_visible %}</form>{% endif %}
</div> <!-- end dashboard-table-container -->

<script>
  if (typeof dt_language == "undefined") {
    var dt_language = {
      "emptyTable":     "{% trans "No data available in table" %}",
      "info":           "{% trans "Showing _START_ to _END_ of _TOTAL_ entries" %}",
      "infoEmpty":      "{% trans "Showing 0 to 0 of 0 entries" %}",
      "infoFiltered":   "{% trans "(filtered from _MAX_ total entries)" %}",
      "infoPostFix":    "",
      "thousands":      ",",
      "lengthMenu":     "{% trans "Show _MENU_ entries" %}",
      "loadingRecords": "{% trans "Loading..." %}",
      "processing":     "{% trans "Processing..." %}",
      "search":         "{% trans "Search:" %}",
      "zeroRecords":    "{% trans "No matching records found" %}",
      "paginate": {
        "first":      "{% trans "First" %}",
        "last":       "{% trans "Last" %}",
        "next":       "{% trans "Next" %}",
        "previous":   "{% trans "Previous" %}"
      },
      "aria": {
        "sortAscending":  "{% trans ": activate to sort column ascending" %}",
        "sortDescending": "{% trans ": activate to sort column descending" %}"
      }
    };
  }

  function export_column_checker( idx, data, node ) {
    {% if has_form_actions %}
      var has_form_actions = true;
    {% else %}
      var has_form_actions = false;
    {% endif %}
    {% if has_actions %}
      var has_actions = true;
      var action_column = {{action_column}};
    {% else %}
      var has_actions = false;
    {% endif %}
    if (has_form_actions) {
      if (idx == 0) {
        return false;
      }
    }
    if (has_actions) {
      if (idx == action_column) {
        return false;
      }
    }
    return true;
  }

  $(document).ready(function() {
    var {{name}} = $('.{{name}}').DataTable({
        dom: '<"d-flex justify-content-between px-3 my-3"<"d-flex flex-row"l{{options.buttons|yesno:"B,'',''"}}>f>rtip',
        {% if options.buttons %}
        buttons: [
          { extend: 'copy', className: 'btn btn-info btn-sm ms-1', exportOptions: {columns:export_column_checker}},
          { extend: 'csv', className: 'btn btn-info btn-sm ms-1', exportOptions: {columns:export_column_checker}},
          { extend: 'pdf', className: 'btn btn-info btn-sm ms-1', exportOptions: {columns:export_column_checker}},
          { extend: 'print', className: 'btn btn-info btn-sm ms-1', exportOptions: {columns:export_column_checker}},
        ],
        {% endif %}
      language: dt_language,
      searching: {{options.searchable|yesno:"true,false,true"}},
      paging: {{options.paging|yesno:"true,false,true"}},
      lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
      {% if options.page_length %}pageLength: {{options.page_length}},{% endif %}
      fnDrawCallback: function(oSettings) {
          if (oSettings.aoData.length < this.api().page.len() && this.api().page.info().pages == 1) {
              $("#" + oSettings.sTableId + "_paginate").hide();
              $("#" + oSettings.sTableId + "_info").hide();
              // $("#" + oSettings.sTableId + "_length").hide();
          } else {
              $("#" + oSettings.sTableId + "_paginate").show();
              $("#" + oSettings.sTableId + "_info").show();
              // $("#" + oSettings.sTableId + "_length").show();
          }
      },

      order: [[{{form.is_visible|yesno:'1,0,0'}}, "{{sort_ascending|yesno:'asc,desc,asc'}}"]],

      columns: [
        {% for key,item in header.items %}
          {
            {% if async %}data: '{{item.field}}',{% endif %}
            orderable: {{item.sortable|yesno:"true,false"}},
            searchable: {{item.searchable|yesno:"true,false"}},
            visible: {{item.visible|yesno:"true,false"}},
            className: "dt-body-{{item.align}} dt-head-{{item.head_align}} {{item.wrap|yesno:",dt-body-nowrap,"}}",
          },
        {% endfor %}
      ],
      createdRow: function(row,data,index,cells) {
        {% for item in stylers %}
        var testVal = Array.isArray(data) ? data[{{item.test_index}}] : data.{{item.test_cell}};

        if (testVal=="{{item.cell_value}}") {
          {% if item.is_row %}
          $(row).addClass("{{item.css_class}}");
          {% else %}
          cells[{{item.target_index}}].classList.add('{{item.css_class}}');
          {% endif %}
        }
        {% endfor %}
      },
      {% if async %}
        processing: true,
        serverSide: true,
        ajax: '{% url ajax_url_name %}?wildewidgetclass={{tableclass}}{% if extra_data %}&extra_data={{extra_data}}{% endif %}&csrf_token={{csrf_token}}'
      {% endif %}
    });

    $('.{{name}}-controls .toggle-vis').on('change', function (e) {
        e.preventDefault();
        var column = {{name}}.column( $(this).attr('data-column') );
        column.visible( this.checked );
    });

    $('.{{name}}-controls .dropdown-item').on('click', function(e) {
      var searchstr = $(this).attr('data-search');
      var column = $(this).attr('data-column');
      var button_id = $(this).parent().attr('aria-labelledby');
      var dropdown_button = $('#' + button_id);
      e.preventDefault();
      $(this).parent().find('.dropdown-item').removeClass('active');
      dropdown_button.find('.filter-target').text($(this).text());
      if (searchstr == "") {
        dropdown_button.removeClass('active');
        {{name}}.column(column).search('').draw();
      } else {
        if (!$(this).hasClass('active')) {
          $(this).addClass('active');
        }
        if (!dropdown_button.hasClass('active')) {
          dropdown_button.addClass('active');
        }
        {{name}}.column(column).search(searchstr).draw();
      }
    });

    {% for batch in filters %}
      {% with field_counter=forloop.counter0 filter=batch.1 item=batch.0 %}
        {% if filter and filter.default %}
          // var
          {{name}}.column('{{field_counter}}').search('{{filter.default_value}}').draw();
        {% endif %}
      {% endwith %}
    {% endfor %}

    {% if has_form_actions and options.has_select_all %}
    $('#{{ name }}-select-all').on('change', function() {
      $('.{{ name }} tbody input[name=checkbox]').prop('checked', this.checked);
    });
    $('.{{ name }}').on('change', 'tbody input[name=checkbox]', function() {
      var total = $('.{{ name }} tbody input[name=checkbox]').length;
      var checked = $('.{{ name }} tbody input[name=checkbox]').filter(':checked').length;
      $('#{{ name }}-select-all').prop(
        'checked', total > 0 && checked === total
      ).prop(
        'indeterminate', checked > 0 && checked < total
      );
    });
    {% endif %}
  });


</script>