{% import 'applied_change_macro.html' as applied_change_macro %}

{% if len_histories >= lim %}
  <p style="color: rgb(224, 3, 3);">
    <b>Limit of loaded history records has been reached! Only {{lim}} history records are shown.</b>
  </p>
{% endif %}

<div class="card-body"></div>
  <table id="tbl_history" class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Time</th>
        <th>Content</th>
        <th>Changed by</th>
        <th>Detail</th>
      </tr>
    </thead>
    <tbody>
      {% for history in histories %}
        <tr class="odd gradeX">
          <td>{{ history.history.created_on }}</td>
          <td>{{ history.history.msg }}</td>
          <td>{{ history.history.created_by }}</td>
          <td width="6%">
            <div id="history-info-div-{{ loop.index0 }}" style="display: none;">
              {{ history.detailed_msg | safe }}
              {% if history.change_set %}
                <div class="content">
                <table class="table table-bordered table-striped">
                <thead><tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>TTL</th>
                    <th>Data</th>
                    <th>Status</th>
                    <th>Comment</th>
                </tr></thead>
                <tbody>
				{% for applied_change in history.change_set %}
                <tr>
                    {% call applied_change_macro.applied_change_template(applied_change) %}
                    {% endcall %}
                </tr>
				{% endfor %}
                </tbody>
                </table>
                </div>
              {% endif %}
            </div>
            <button type="button" class="btn btn-primary history-info-button"
              {% if history.detailed_msg == "" and history.change_set is none %}
                style="visibility: hidden;"
              {% endif %} value="{{ loop.index0 }}">
              <i class="fa-solid fa-info"></i>
              &nbsp;Info
            </button>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
  var table;
  $(document).ready(function () {
    table = $('#tbl_history').DataTable({
      "order": [
        [0, "desc"]
      ],
      "searching": true,
      "columnDefs": [{
        "type": "time",
        "render": function (data, type, row) {
          return moment.utc(data).local().format('YYYY-MM-DD HH:mm:ss');
        },
        "targets": 0
      }],
      "info": true,
      "autoWidth": false,
      orderCellsTop: true,
      fixedHeader: true
    });
    $(document.body).on('click', '.history-info-button', function () {
      var modal = $("#modal_history_info");
      var history_id = $(this).val();
      var info = $("#history-info-div-" + history_id).html();
      $('#modal-info-content').html(info);
      modal.modal('show');
    });
    $(document.body).on("click", ".button-filter", function (e) {
      e.stopPropagation();
      var nextRow = $("#filter-table")
      if (nextRow.css("visibility") == "visible")
          nextRow.css("visibility", "collapse")
      else
        nextRow.css("visibility", "visible")
    });
  });
</script>