{% extends 'admin/change_list.html' %}
{% load i18n admin_list %}

{% block extrastyle %}
    {{ block.super }}
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
{% endblock %}

{% block search %}{% endblock %}

{% block result_list %}
<div id="conflictview">
    <ul>
        {% for ele in conflictNodeList %}
          {% with ele|first as node %}
          {% with ele|last as version %}
            {% include 'template_editor/TreeNode.html' with node=node version=version %}
          {% endwith %}
          {% endwith %}
        {% endfor %}
    </ul>
</div>
<br />
<hr />
<br />
<div style="display:inline;position:absolute;right:0px;"><span style="display:table-cell;width: 100px;text-align:right;">{% trans "File size" %}</span><span style="display:table-cell;width: 140px;text-align:right;">{% trans "Update time" %}</span><span style="display:table-cell;width: 60px;text-align:right;">{% trans "Version" %}</span></div>
<br />
<div id="treeview">
    <ul>
        {% for root in roots %}
            {% include 'template_editor/TreeNode.html' with node=root %}
        {% endfor %}
    </ul>
</div>
<script>
$("#treeview").jstree({
  "types" : {
    "folder" : {
      "icon" : "/static/template_editor/icon/dir.png"
    },
    "default" : {
      "icon" : "/static/template_editor/icon/txt.png"
    },
    "html" : {
      "icon" : "/static/template_editor/icon/html.png"
    }
  },
  "plugins" : ["types"]
});

$('#openAll').click(function() {
  $("#treeview li").each(function(){
    $(this).removeClass('jstree-closed');
    $(this).addClass('jstree-open');
    $(this).attr('aria-expanded', 'true');
  });
});
$('#closeAll').click(function() {
  $("#treeview li").each(function(){
    $(this).removeClass('jstree-open');
    $(this).addClass('jstree-closed');
    $(this).attr('aria-expanded', 'false');
  });
});
</script>

{% endblock %}

{% block object-tools-items %}
<li>
    <a href="#" id="openAll">{% trans "All open" %}</a>
</li>
<li>
  <a href="#" id="closeAll">{% trans "All close" %}</a>
</li>
{% endblock %}

{% block pagination %}{% endblock %}