| {% block body %}
#node-container

	section.node-details-container
		.node-details-header
			.node-title#node-title
				| {{node.name}}

			.node-details-meta-actions
				.btn-browsetoggle(
					title="Toggle between list/grid view",
					data-toggle="tooltip",
					data-placement="top")
					i.pi-list

	| {% if node.description %}
	.node-details-description
		| {{ node | markdowned('description') }}
	| {% endif %}


	section.node-children.group

		| {% if children %}
		| 	{% for child in children %}

		| {# Browse type: List #}
		a(
			href="{{ url_for_node(node=child) }}",
			data-node_id="{{ child._id }}",
			class="item_icon list-node-children-item browse-list")
			.list-node-children-item-thumbnail

				| {% if child.picture %}
				img(
					src="{{ child.picture.thumbnail('t', api=api)}} ")
				| {% else %}
				.cloud-logo
					i.pi-blender-cloud
				| {% endif %}

				| {% if child.permissions.world %}
				.list-node-children-item-ribbon
					span free
				| {% endif %}

				.list-node-children-item-thumbnail-icon
					| {% if child.properties.content_type and child.properties.content_type == 'video' %}
					i.pi-play
					| {% elif child.properties.content_type and child.properties.content_type == 'image' %}
					i.pi-image
					| {% elif child.properties.content_type and child.properties.content_type == 'file' %}
					i.pi-file-archive
					| {% else %}
					i.pi-folder
					| {% endif %}

			.list-node-children-item-name {{ child.name }}

			.list-node-children-item-meta
				| {% if child.properties.status != 'published' %}
				span.status {{ child.properties.status }}
				| {% endif %}

				span.type
					| {% if child.properties.content_type %}
					| {{ child.properties.content_type | undertitle }} ·
					| {% elif child.node_type == 'group' %}
					| Folder ·
					| {% else %}
					| {{ child.node_type | undertitle }} ·
					| {% endif %}

				span(title="Created on {{ child._created }}") {{ child._created | pretty_date }}

		| {# Browse type: Icon #}
		a(href="{{ url_for_node(node=child) }}",
			data-node_id="{{ child._id }}",
			title="{{ child.name }}",
			class="item_icon list-node-children-item browse-icon {% if child.picture %}has-picture{% endif %}")
			.list-node-children-item-thumbnail

				| {% if child.picture %}
				img(
					src="{{ child.picture.thumbnail('m', api=api)}} ")
				| {% else %}
				.cloud-logo
					i.pi-blender-cloud
				| {% endif %}

				.list-node-children-item-thumbnail-icon
					| {% if child.properties.content_type and child.properties.content_type == 'video' %}
					i.pi-play
					| {% elif child.properties.content_type and child.properties.content_type == 'image' %}
					i.pi-image
					| {% elif child.properties.content_type and child.properties.content_type == 'file' %}
					i.pi-file-archive
					| {% else %}
					i.pi-folder
					| {% endif %}

				| {% if child.properties.status != 'published' %}
				.list-node-children-item-status {{ child.properties.status }}
				| {% endif %}

				| {% if child.permissions.world %}
				.list-node-children-item-ribbon
					span free
				| {% endif %}

			.list-node-children-item-name
				span {{ child.name }}

		| 	{% endfor %}
		| {% else %}
		.list-node-children-container
			.list-node-children-empty No items... yet!
		| {% endif %}

	script.
		// Generate GA pageview
		ga('send', 'pageview', location.pathname);

		$('a.item_icon').unbind("click")
						.click(function(e){
			e.preventDefault();

			var nodeId = $(this).data('node_id');

			if (ProjectUtils.projectId()) {
				// When clicking on a node preview, we load its content
				// displayNode will run asynchronously and set the bcloud_current_node_id
				// as well, but we set it manually in the next line as well, to make sure
				// that select_node on jstree works as expected, preventing the node to be
				// loaded twice.
				Cookies.set('bcloud_current_node_id', nodeId);

				// Update tree with current selection
				var jstree = $('#project_tree').jstree(true);
				jstree.deselect_all();
				jstree.open_node('n_' + ProjectUtils.nodeId(), function() {
					jstree.select_node('n_' + nodeId);
				});
			} else {
				// If there's project_id defined, we use the full link (for search)
				window.location.replace('/nodes/' + nodeId + '/redir');
			};
		});

		// Browse type: icon or list
		function projectBrowseTypeIcon() {
			$(".list-node-children-item.browse-list").hide();
			$(".list-node-children-item.browse-icon").show();
			$(".btn-browsetoggle").html('<i class="pi-list"></i>');
		};

		function projectBrowseTypeList() {
			$(".list-node-children-item.browse-list").show();
			$(".list-node-children-item.browse-icon").hide();
			$(".btn-browsetoggle").html('<i class="pi-layout"></i>');
		};

		function projectBrowseTypeCheck(){
			/* Only run if we're in a project, or search */
			if(document.getElementById("project-container") !== null || document.getElementById("search-container") !== null) {

				var browse_type = Cookies.getJSON('bcloud_ui');

				if (browse_type && browse_type.group_browse_type) {
					if (browse_type.group_browse_type == 'icon') {
						projectBrowseTypeIcon();

					} else if ( browse_type.group_browse_type == 'list' ) {
						projectBrowseTypeList();
					}
				} else {
					projectBrowseTypeIcon();
				};
			};
		}

		function projectBrowseToggle(){

			var browse_type = Cookies.getJSON('bcloud_ui');

			if (browse_type && browse_type.group_browse_type) {
				if (browse_type.group_browse_type == 'icon') {
					projectBrowseTypeList();
					setJSONCookie('bcloud_ui', 'group_browse_type', 'list');
				} else if ( browse_type.group_browse_type == 'list' ) {
					projectBrowseTypeIcon();
					setJSONCookie('bcloud_ui', 'group_browse_type', 'icon');
				}
			} else {
				projectBrowseTypeList();
				setJSONCookie('bcloud_ui', 'group_browse_type', 'list');
			}
		}

		$('.btn-browsetoggle').on('click', function (e) {
			e.preventDefault();
			projectBrowseToggle();
		});

		projectBrowseTypeCheck();


include ../_scripts

| {% endblock %}