{% extends "admin/base_site.html" %}
{% load admin_static i18n %}

{% block breadcrumbs %}
  <div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    &rsaquo;
    <a href="{% url 'log_viewer:log_file_view' %}">{% trans 'Log Viewer' %}</a>
  </div>
{% endblock %}

{% block extrastyle %}
  <link rel="stylesheet" type="text/css" href="{% static 'admin/css/changelists.css' %}">
  <link rel="stylesheet" type="text/css" href="{% static 'log_viewer/css/jquery.dataTables.min.css' %}">
  <link rel="stylesheet" type="text/css" href="{% static 'log_viewer/css/log-viewer.css' %}">

  {% if custom_style_file %}
    <link type="text/css" href="{{ custom_style_file }}" rel="stylesheet">
  {% endif %}
{% endblock %}

{% block extrahead %}
  <script src="{% static 'log_viewer/js/jquery.min.js' %}"></script>
  <script src="{% static 'log_viewer/js/jquery.dataTables.min.js' %}"></script>
{% endblock %}

{% block content %}
  <div class="django__log__viewer">
    {% if custom_file_list_title %}
      <b>{{ custom_file_list_title }}</b>
    {% endif %}

    <div id="content-main">
      <div class="module filtered" id="changelist">
        <div id="changelist-filter">
          <h2>{% trans 'Log Files' %}</h2>
          <div id="log-files-list">
          </div>
        </div>
        <form id="changelist-form">
          <div class="results">
            <table id="log-entries" class="display" style="width:100%">
              <thead>
                <tr><th scope="col">{% trans 'Log entries' %}</th></tr>
              </thead>
            </table>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script>
    function loadDataTableTrigger(table_name, url_json) {
      $(table_name).DataTable({
        pageLength: '{{ page_length }}',
        ajax: function (data, callback, settings) {
          $.ajax({
            type: 'get',
            url: url_json,
            success:function(response){
                const new_logs = [];
                var next_page = response.next_page || 1;

                response.logs.forEach(function(text){
                  new_logs.push([text])
                });

                callback({
                  data: new_logs,
                  recordsTotal: next_page,
                  recordsFiltered: next_page
                });
            }
          });
        }
      });
    }

    function loadDataTable(url_json) {
      var table_name ='table#log-entries';
      if (!$.fn.dataTable.isDataTable(table_name)) {
        loadDataTableTrigger(table_name, url_json);
      }else {
        table_dt = $(table_name).DataTable();
        table_dt.destroy();
        loadDataTableTrigger(table_name, url_json);
      }
    }

    $(document).ready(function() {
        // just blank entry to get the `log_files`
        var url_json = "{% url 'log_viewer:log_json_view' xxxxx %}";
        $.getJSON(url_json, function(result){
            result.log_files.forEach(function(log) {
                const keys = Object.keys(log);
                Object.entries(log).forEach(([file_name, xtra]) => {
                    // console.log(file_name);
                    // console.log(xtra);
                    var html = '<ul><li><a class="btn-load-json-log" href="javascript:;" '+
                               'data-href="'+url_json+file_name+'">'+xtra.display+'</a></li></ul>'
                    $('div#log-files-list').append(html);
                });
            });
        });
    });

    $(document).on('click', '.btn-load-json-log', function(){
        // console.log(this);
        loadDataTable($(this).data('href'));
    });
  </script>
{% endblock%}