{% extends 'base.jinja2' %}

{% block html_title %}Detail{% endblock %}

{% from "macros.jinja2" import
    render_relaties_lijst,
    render_labels
%}

{% block content %}
    <div class="row">
        <div class="large-4 columns">
            <div class="panel">
                <div id="tree1" data-url="{{ request.route_path('scheme_tree', scheme_id= scheme_id) }}"></div>
            </div>
        </div>
        <div class="large-8 columns">
    {% if concept %}
            <h1 class="concept">{{ concept.label(request.locale_name).label|title }}</h1>
            <ul>
                <li>id: {{ concept.concept_id }}</li>
                {% if conceptType == 'Concept' %}
                <li>type: {% trans %}concept{% endtrans %}</li>
                {% elif conceptType == 'Collection' %}
                <li>type: {% trans %}collection{% endtrans %}</li>
                {% endif %}
                {% if concept.uri %}
                <li>uri: <a href="{{ concept.uri }}">{{ concept.uri }}</a></li>
                {% endif %}
            </ul>

            {% if concept.labels %}
            <h2 class="concept">{% trans %}labels{% endtrans %}</h2>
            {{ render_labels(concept.labels, 'prefLabel') }}
            {{ render_labels(concept.labels, 'altLabel') }}
            {{ render_labels(concept.labels, 'hiddenLabel') }}
            {% endif %}

        {% if conceptType == 'Concept' %}
            {% if concept.notes|length > 0 %}
            <h2 class="concept">{% trans %}notes{% endtrans %}</h2>
            <ul>
                {%- for note in concept.notes %}
                <li lang="{{ note.language }}">
                    {{ note.notetype_id }} <em class="language">({{ note.language }})</em>: {{ note.note}}
                </li>
                {%- endfor %}
            </ul>
            {% endif %}
        {% endif %}

        <h2 class="concept">{% trans %}relations{% endtrans %}</h2>

        {% if conceptType == 'Concept' %}
            {% if concept.broader_concepts|length > 0 %}
            <h4 class="subheader">{% trans %}broader{% endtrans %}:</h4>
            {{ render_relaties_lijst(request, concept.broader_concepts, scheme_id) }}
            {% endif %}

            {% if concept.narrower_concepts|length + concept.narrower_collections|length > 0 %}
            <h4 class="subheader">{% trans %}narrower{% endtrans %}:</h4>
            {{ render_relaties_lijst(request, concept.narrower_concepts|list + concept.narrower_collections|list, scheme_id) }}
            {% endif %}

            {% if concept.related_concepts|length > 0 %}
            <h4 class="subheader">{% trans %}related{% endtrans %}:</h4>
            {{ render_relaties_lijst(request, concept.related_concepts, scheme_id) }}
            {% endif %}
        {% endif %}

        {% if conceptType == 'Collection' %}
            <h4 class="subheader">{% trans %}members{% endtrans %}:</h4>
            {{ render_relaties_lijst(request, concept.members, scheme_id) }}
        {% endif %}

        {% if concept.member_of|length > 0 %}
        <h4 class="subheader">{% trans %}member_of{% endtrans %}:</h4>
        {{ render_relaties_lijst(request, concept.member_of, scheme_id) }}
        {% endif %}

    {% endif %}
		</div>
    </div>

{% endblock %}

{% block footer %}
		<script>
            var $tree = $('#tree1');
            $tree.tree({
                onCreateLi: function(node, $li) {
                    $li.find('.jqtree-title').wrap(function() {
                        return "<a href='{{ request.route_path('concept', scheme_id= scheme_id, c_id = '') }}" + node.concept_id + "?treeid=" + node.id + "'><div></div></a>";
                    });
                }
            });
			
			{% if concept %}
            $tree.bind(
                'tree.init',
                function() {
					var treeid = getUrlVar("treeid");
					if(treeid != '') {
						var node = $tree.tree('getNodeById', treeid);
						$tree.tree('selectNode', node, true);
						$tree.tree('openNode', node);	
					}
					else {	
						var nodes = $tree.tree('getNodesByProperty', 'concept_id', {{ concept.concept_id }} );
						$.each(nodes, function( index, node ) {
							$tree.tree('addToSelection', node);
							if ( node.children.length > 0){
								$tree.tree('openNode', node);
							} else {
								$tree.tree('openNode', node.parent);
							}
							
						});					
					}
                }			
            );
			{% endif %}
        </script>
{% endblock %}