{% extends "versioning/display.html" %}

{% block head_css %}
    {{ block.super }}
	<style type="text/css" class="source">
        .jstree-default li[rel="scenario"] a:hover { color: #E89512; text-decoration: underline; }
	</style>

{% endblock %}

{% block head_js %}
    {{ block.super }}
    <script src="{{ MEDIA_URL }}jstree/jquery.jstree.min.js" type="text/javascript"></script>
	<script type="text/javascript">
        $(document).ready(function() {
			$("#tree").jstree({
                "plugins" : [ "themes", "html_data", "types" ],
                "types" : {
                    "types": {
                        "scenariotype" : {
                            icon : {
                    			image : '{{ MEDIA_URL }}images/tree/deviationscenariotype.png'
                            }
                        },
                        "scenario" : {
                            icon : {
                    			image : '{{ MEDIA_URL }}images/tree/deviationscenario.png'
                            }
                        }
                    }
                }
        	}).jstree("open_all");
		});
	</script>
{% endblock %}

{% block extracontent %}
<div id="tree">
{% regroup attentionpoints by type as type_list %}
<ul>
{% for type in type_list %}
    <li rel="scenariotype"><a href="#"><b>{{ type.grouper }}</b></a>
    <ul>
        {% for item in type.list %}
        <li id="{{ item.v_id }}" rel="scenario"><a href="{{ item.get_absolute_url }}">{{ item.name }}</a></li>
        {% endfor %}
    </ul>
    </li>
{% endfor %}
</ul>
</div>
<div style="clear: both;">&nbsp;</div>
{% endblock %}