{% extends 'website/backoffice/base.html' %}
{% load url from future %}
{% load mptt_tags %}

{% block bodyclass %}roles{% endblock %}

{% block style %}
    <link rel="stylesheet" href='{{ STATIC_URL }}backoffice/css/jquery.treeview.css' type="text/css" />
{% endblock %}

{% block content %}
    <div class="add-button">
        <a href="{% url 'website:backoffice:volunteers:roles:add' %}">
            <button class="button green"><span>Add Role</span></button>
        </a>
    </div>
    <ul id="referral-tree" class="treeview-red">
        {% recursetree nodes %}
            <li>
                <a href="{% url 'website:backoffice:volunteers:roles:detail' node.id %}">{{ node }}</a>({{node.get_descendant_count}})
                {% if not node.is_leaf_node %}
                    <ul class="children">
                        {{ children }}
                    </ul>
                {% endif %}
            </li>
        {% endrecursetree %}
    </ul>
{% endblock %}

{% block script %}
    <script src='{{ STATIC_URL }}backoffice/js/jquery.cookie.js'></script>
    <script src='{{ STATIC_URL }}backoffice/js/jquery.treeview.js'></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#referral-tree").treeview();
    });
    </script>
{% endblock %}