{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block help_message %}
{% endblock %}

{% block content %}
<div class="wrapper wrapper-content">
   <div class="row">
       <div class="col-sm-3" id="split-left" style="padding-left: 3px;padding-right: 0">
           {% include 'assets/_node_tree.html' %}
       </div>
       <div class="col-sm-9 animated fadeInRight" id="split-right">
           <div class="tree-toggle" style="z-index: 10">
               <div class="btn btn-sm btn-primary tree-toggle-btn" onclick="toggleSpliter()">
                   <i class="fa fa-angle-left fa-x" id="toggle-icon"></i>
               </div>
           </div>
           <div class="mail-box-header">
               {% block table_container %}
                    <table class="table table-striped table-bordered table-hover" id="{% block table_id %}editable{% endblock %}" >
                        <thead>
                            <tr>
                                {% block table_head %} {% endblock %}
                            </tr>
                        </thead>
                        <tbody>
                        {% block table_body %} {% endblock %}
                        </tbody>
                    </table>
                {% endblock %}
           </div>
       </div>
   </div>
</div>
<script>
var showTree = 1;
function toggleSpliter() {
    if (showTree === 1) {
        $("#split-left").hide(500, function () {
            $("#split-right").attr("class", "col-sm-12");
            $("#toggle-icon").attr("class", "fa fa-angle-right fa-x");
            showTree = 1;
        });
    } else {
        $("#split-right").attr("class", "col-sm-9");
        $("#toggle-icon").attr("class", "fa fa-angle-left fa-x");
        $("#split-left").show(500);
        showTree = 0;
    }
}
</script>
{% endblock %}