{% extends 'layouts/base.html' %}

{% set page_title = 'Home' %}

{% block container %}
    <div class="container">

        <div class="blog-header"><h3 class="blog-title">Recursive Tree</h3></div>
        <a class="btn btn-common" href="#" id="btn-hide">Hide all</a>
        <a class="btn btn-common" href="#" id="btn-show">Show all</a>


        <ul class="tree">
            {%- for element in elements recursive %}
                <li><a class="tree-node" href="#"> {{ element.name }} </a>
                    {%- if element.children -%}
                        <ul class="submenu">{{ loop(element.children) }}</ul>
                    {%- endif %}
                    {#if element has children id build semi graphical line to it#}
                </li>
            {%- endfor %}
        </ul>
    </div>


{% endblock %}
{% block js_btm_more %}
    <script>
        (function(){
            $('.tree li a').next().children().hide();
            $('#btn-show').click(function(event){ $('.submenu li').show();});
            $('#btn-hide').click(function(event){ $('.tree li a').next().children().hide();});
            $('.tree-node').click(function(event){
                event.preventDefault();
                $(this).next().children().toggle();
            });
        })();
    </script>
    {% endblock %}