| {% from '_macros/_asset_list_item.html' import asset_list_item %}
include ../../../mixins/components

| {% block body %}
#node-container
	section.d-flex
		h4.p-4 {{node.name}}

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

	section.container-fluid
		| {% if children %}

		.d-flex.justify-content-end.mb-2
			button.btn.btn-sm.btn-outline-secondary(
				id="asset_list_toogle_{{node._id}}",
				class="js-btn-browsetoggle",
				title="Toggle between list/grid view",
				data-toggle="tooltip",
				data-placement="top")
				i.pi-list

		+card-deck(id="asset_list_{{node._id}}",class="pl-4")
			| {% for child in children %}
			| {{ asset_list_item(child, current_user) }}
			| {% endfor %}
			| {% else %}
			.list-node-children-container
				.list-node-children-empty No items... yet!
		| {% endif %}

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

		$('a.js-item-open').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() {
			$("#asset_list_{{node._id}}").removeClass('card-deck-vertical');
			$("#asset_list_toogle_{{node._id}}").html('<i class="pi-list"></i> List View');
		};

		function projectBrowseTypeList() {
			$("#asset_list_{{node._id}}").addClass('card-deck-vertical');
			$("#asset_list_toogle_{{node._id}}").html('<i class="pi-layout"></i> Grid View');
		};

		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');
			}
		}

		$("#asset_list_toogle_{{node._id}}").on('click', function (e) {
			e.preventDefault();
			projectBrowseToggle();
		});

		projectBrowseTypeCheck();


include ../_scripts

| {% endblock %}
