{% load staticfiles %}
{% load dashboard_tags %}
{% load i18n %}
{% load fontawesome %}

<div class="dataTables_wrapper no-footer">
          {%  if widget.structure == 'flat' %}
              <table class="table" id="{{widget.id}}_table">
                  <thead>
                    <tr>
                        <th class="sorting_disabled"></th>
                        {% for c in widget.columns %}
                            {% if widget.details_columns %}
                                {% if c not in widget.details_columns %}
                                    <th class="sorting_disabled">{{ c }}</th>
                                {% endif %}
                            {% else %}
                                 <th class="sorting_disabled">{{ c }}</th>
                            {% endif %}
                        {% endfor %}
                    </tr>
                </thead>
                  <tbody>
                        {% for row in widget.rows %}
                            {% if widget.highlight_fields_values not in row %}
                                <tr class="{{ widget.highlight_class }}">
                            {% else %}
                                <tr>
                            {% endif %}
                                 <td class="details-control">
                                        <div class="d-none" id="details-{{forloop.counter}}">{{ row.6 }}</div>
                                  </td>
                                {% for v in row %}
                                    {% if v.template %}
                                    {% else %}
                                        {% if forloop.counter not in widget.details_values %}
                                            <td class="{{widget.td_class}}">{{v | truncatechars:"300"|safe}}</td>
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                            </tr>
                        {% endfor %}
                  </tbody>
              </table>
          {% else %}
              <table class="table dataTable widgettable no-center" id="{{widget.id}}_table">
                  <thead>
                    <tr>
                      {% for col in widget.columns %}
                          {%  if 'ACTION_' in col %}
                              <th class="sorting_disabled"></th>
                          {% else %}
                              <th class="{{widget.thead_th_class}}">{{col}}</th>
                          {% endif %}

                      {% endfor %}

                    </tr>
                  </thead>
                  <tbody>
                        {% for row in widget.rows %}
                        <tr>
                            {% for col in widget.columns %}
                              {%  if 'ACTION_' in col %}
                                 {% for k,v in  row.items %}
                                     {% if 'ACTION_' in k %}
                                     <td>
                                     {% include 'sharedapp/components/'|add:v.template|add:'.html' with content=v %}
                                     </td>
                                    {% endif %}
                                 {% endfor %}
                              {% else %}
                                  {% if 'highlight_columns' in widget %}
                                      {% if col in widget.highlight_columns %}
                                          {% if 'highlight_fields' in widget %}
                                                {% if row|get_item:col in widget.highlight_fields %}
                                                    <td class="{{widget.td_class}} {{ widget.highlight_class }}">{{row|get_item:col|safe}}</td>
                                                {% else %}
                                                    <td class="{{widget.td_class}}">{{row|get_item:col|safe}}</td>
                                                {% endif %}
                                          {% endif %}
                                      {% else %}
                                              <td class="{{widget.td_class}}">{{row|get_item:col|safe}}</td>
                                       {% endif %}
                                  {% else %}
                                    <td class="{{widget.td_class}}">{{row|get_item:col|safe}}</td>
                                  {% endif %}
                              {% endif %}

                            {% endfor %}
                        </tr>
                        {% endfor %}
                  </tbody>
              </table>

          {% endif %}

      </div>


<script>
    function format ( d ) {
          return (`
     <div class="slider toggle-detail-container accordion">
                 <div class="accordion-collapse collapse show padding-accordion-collapse details-scroll-wrapper">
                        <div class="details-border">
                            <div class="details-block-panel-head d-flex align-items-center details-scroll justify-content-between">
                                <p class="code-block-panel-heading">Details</p>
                            </div>
                           <div class="code-panel-body code-snippet-upper-group-1 code-snippet-group details-scroll details-padding"><pre>${$('#details-'+d).text().trim()} </pre></div>
                        </div>
                </div>
            </div>
        `)
      };
  $(document).ready(function() {
      $.fn.dataTable.ext.classes.sPageButton = 'paginate_link';
        var table = $('#{{widget.id}}_table').removeAttr('width').DataTable({
            "autoWidth": true,
            "pagingType": "full_numbers",
            {% if 'paging' in widget %}
                  "paging": {% if widget.paging %} true {% else %} false {% endif %},
              {% else %}
                  "paging": true,
              {% endif %}
            "searching": true,
            "ordering": {% if 'order' in widget %} true {% else %} false {% endif %},
            "info": true,
            {% if 'order' in widget %}
                "order": {{widget.order|jsonencode|safe}},
            {% endif %}
            'processing': true,
            "initComplete": function (settings, json) {
		$("#{{widget.id}}_table").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
            },
            "language": {
		"paginate": {
		    "first": "<img src=\"{% static 'gui2/appstore2/images/blue-show-first-button.svg' %}\" alt=\"\" title=\"Go To First Page\" />",
		    "last": "<img src=\"{% static 'gui2/appstore2/images/blue-show-last-button.svg' %}\" alt=\"\" title=\"Go To Last Page\" />",
		    "next": "<img src=\"{% static 'gui2/appstore2/images/blue-right-angle-icon.svg' %}\" alt=\"\" title=\"Go To Next Page\" />",
		    "previous": "<img src=\"{% static 'gui2/appstore2/images/blue-left-angle-icon.svg' %}\" alt=\"\" title=\"Go To Previous Page\" />"
		}
            },
            "dom": "<<t><\"table-bottom\"ilp>>",
            fnDrawCallback : function() {
		if ($(this).find('.dataTables_empty').length == 1) {
		    $(".table-bottom").hide();
		} else {
                    $(".table-bottom").show();
		}
            }
	});

      $('#{{widget.id}}_table tbody').on('click', 'td.details-control', function(){

        var tr = $(this).closest('tr');
        var row = table.row( tr );
        if(row.child.isShown()){
            // This row is already open - close it
            $('div.show', row.child()).slideUp( function () {
                row.child.hide();
                tr.removeClass('shown');
            });
        } else {
            // Open this row
            row.child(format(row.index($(this))+1)).show();
            tr.addClass('shown');
            $('div.show', row.child()).slideDown();
        }
    });

        $("#{{widget.parent_search_id}}").on('keyup', function () {
        $('#{{widget.id}}_table').dataTable().fnFilter(this.value);
    });
  });

</script>