| {% extends 'layout.html' %}
| {% from '_macros/_add_new_menu.html' import add_new_menu %}
| {% from '_macros/_navigation.html' import navigation_project %}

include ../../../../pillar/src/templates/mixins/components

| {% block page_title %}{{ project.name }}{% endblock%}

| {% if title is not defined %}
| {% set title = 'project' %}
| {% endif %}

| {% block og %}
meta(property="og:type", content="website")

| {% if og_picture %}
meta(property="og:image", content="{{ og_picture.thumbnail('l', api=api) }}")
meta(name="twitter:image", content="{{ og_picture.thumbnail('l', api=api) }}")
| {% elif node and node.picture %}
meta(property="og:image", content="{{ node.picture.thumbnail('l', api=api) }}")
meta(name="twitter:image", content="{{ node.picture.thumbnail('l', api=api) }}")
| {% elif project.picture_header %}
meta(property="og:image", content="{{ project.picture_header.thumbnail('l', api=api) }}")
meta(name="twitter:image", content="{{ project.picture_header.thumbnail('l', api=api) }}")
| {% endif %}

| {% if show_project %}
meta(property="og:title", content="{{ project.name }} - Blender Cloud")
meta(name="twitter:title", content="{{ project.name }} - Blender Cloud")
meta(property="og:description", content="{{ project.summary }}")
meta(name="twitter:description", content="{{ project.summary }}")

meta(property="og:url", content="{{ url_for('projects.view', project_url=project.url, _external=True) }}")
| {% else %}

| {% if node %}
meta(property="og:title", content="{{ node.name }} - Blender Cloud")
meta(name="twitter:title", content="{{ node.name }} on Blender Cloud")

| {% if node.node_type == 'post' %}

| {% if node.properties.content %}
meta(property="og:description", content="{{ node.properties.content | truncate(180) }}")
meta(name="twitter:description", content="{{ node.properties.content | truncate(180) }}")
| {% else %}
meta(property="og:description", content="Blender Cloud, your source for open content and training")
meta(name="twitter:description", content="Blender Cloud, your source for open content and training")
| {% endif %}

| {% else %}

| {% if node.description %}
meta(property="og:description", content="{{ node.description | truncate(180) }}")
meta(name="twitter:description", content="{{ node.description | truncate(180) }}")
| {% else %}
meta(property="og:description", content="Blender Cloud, your source for open content and training")
meta(name="twitter:description", content="Blender Cloud, your source for open content and training")
| {% endif %}

| {% endif %}

meta(property="og:url", content="{{url_for('projects.view_node', project_url=project.url, node_id=node._id)}}")
| {% else %}
meta(property="og:title", content="{{ project.name }} Blog on Blender Cloud")
meta(name="twitter:title", content="{{ project.name }} Blog on Blender Cloud")
meta(property="og:description", content="{{ project.summary }}")
meta(name="twitter:description", content="{{ project.summary }}")

meta(property="og:url", content="{{url_for('projects.view', project_url=project.url, _external=True)}}")
| {% endif %}

| {% endif %}
| {% endblock %}

| {% block head %}
link(href="{{ url_for('static_pillar', filename='assets/jstree/themes/default/style.min.css') }}", rel="stylesheet")
| {% if node %}
link(rel="amphtml", href="{{ url_for('nodes.view', node_id=node._id, _external=True, format='amp') }}")
| {% endif %}

script(src="{{ url_for('static_pillar', filename='assets/js/vendor/video.min.js') }}")
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-ga-0.4.2.min.js') }}")
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotkeys-0.2.20.min.js') }}")
script(src="{{ url_for('static_pillar', filename='assets/js/video_plugins.min.js') }}")
| {% endblock %}

| {% block css %}
link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet")
link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }}", rel="stylesheet")
| {% endblock %}

| {% block navigation_tabs %}
| {{ navigation_project(project, navigation_links, extension_sidebar_links, title) }}
| {% endblock navigation_tabs %}

| {% block body %}
#project-container.is-sidebar-visible
	#project-side-container.bg-light
		#project_nav(class="{{ title }}")
			#project_nav-container
				| {% if title != 'about' %}
				button.project-sidebar-toggle.btn.btn-sm.btn-link.px-1.rounded-0.bg-light.text-muted.position-absolute(
					type="button",
					class="js-project-sidebar-toggle")
					i.pi-angle-double-left
				| {% block project_tree %}
				#project_tree.bg-light.p-1
				| {% endblock project_tree %}
				| {% endif %}

	#project_context-container
		.breadcrumbs-container.bg-dark.fixed-top
			button.project-sidebar-toggle.btn.btn-sm.btn-link.px-1.bg-dark.rounded-0.text-muted(
				type="button",
				class="js-project-sidebar-toggle")
				i.pi-menu

			node-breadcrumbs(node-id="{{ node._id }}", @navigate="(nodeId)=>{displayNode(nodeId)}")
			script.
				new Vue({el:'node-breadcrumbs'});

		| {% if project.has_method('PUT') %}
		#project_context-header.position-absolute
			ul.project-edit-tools.disabled.d-flex.list-unstyled.py-2.mb-0
				li.dropdown(
					title="Create...",
					data-toggle="tooltip",
					data-placement="left")
					button.dropdown-toggle.btn.btn-sm.btn-outline-secondary(
						id="item_add",
						class="project-mode-view",
						type="button",
						data-toggle="dropdown",
						aria-haspopup="true",
						aria-expanded="false")
						i.pi-collection-plus

					ul.dropdown-menu.dropdown-menu-right(
						class="add_new-menu")
						| {{ add_new_menu(project.node_types) }}

				li.button-edit
					a.btn.btn-sm.btn-outline-secondary.ml-2.px-2(
						id="item_edit",
						class="project-mode-view",
						href="javascript:void(0);",
						title="Edit",
						data-project_id="{{project._id}}",
						data-toggle="tooltip",
						data-placement="top")
						i.button-edit-icon.pi-edit

				li.dropdown
					button.dropdown-toggle.btn.btn-sm.btn-outline-secondary.mx-2(
						class="project-mode-view",
						type="button",
						data-toggle="dropdown",
						aria-haspopup="true",
						aria-expanded="false")
						i.pi-more-vertical.p-0

					ul.dropdown-menu.dropdown-menu-right
						| {% if current_user.has_cap('admin') %}
						li
							a.dropdown-item(
								id="item_featured",
								href="javascript:void(0);",
								title="Feature on project's homepage",
								data-toggle="tooltip",
								data-placement="left")
								i.pi-star.pr-2
								| Toggle Featured

						li
							a.dropdown-item(
								id="item_toggle_public",
								href="javascript:void(0);",
								title="Make it accessible to anyone",
								data-toggle="tooltip",
								data-placement="left")
								i.pi-lock-open.pr-2
								| Toggle Public
						| {% endif %}

						li
							a.dropdown-item(
								id="item_toggle_projheader",
								href="javascript:void(0);",
								title="Feature as project's header",
								data-toggle="tooltip",
								data-placement="left")
								i.pi-star.pr-2
								| Toggle Project Header video

						li.button-move
							a.dropdown-item(
								id="item_move",
								href="javascript:void(0);",
								title="Move into a folder...",
								data-toggle="tooltip",
								data-placement="left")
								i.button-move-icon.pi-move.pr-2
								| Move

						li.button-delete
							a.dropdown-item(
								id="item_delete",
								href="javascript:void(0);",
								title="Can be undone within a month",
								data-toggle="tooltip",
								data-placement="left")
								i.pi-trash.pr-2
								| Delete Project

				// Edit Mode
				li.button-cancel
					a.btn.btn-outline-secondary(
						id="item_cancel",
						class="project-mode-edit",
						href="javascript:void(0);",
						title="Cancel changes")
						i.button-cancel-icon.pi-cancel
						| Cancel

				li.button-save
					a.btn.btn-outline-success.mx-2(
						id="item_save",
						class="project-mode-edit",
						href="javascript:void(0);",
						title="Save changes")
						i.button-save-icon.pi-check
						| Save Changes

		| {% endif %}

		| {% set utm_source = request.args.get('utm_source') %}
		| {% if config.UTM_LINKS and utm_source in config.UTM_LINKS %}
		#utm_container
			a(href="{{config.UTM_LINKS[utm_source]['link']}}")
				img(src="{{config.UTM_LINKS[utm_source]['image']}}", alt="gift", class="img-responsive")
		| {% endif %}
		#project_context
			| {% block project_context %}
			| {% if show_project %}
			| {% include "projects/view_embed.html" %}
			| {% endif %}
			| {% endblock project_context %}

		#overlay-mode-move-container
			.overlay-container
				.title
					i.pi-angle-left
					| Select the <strong>folder</strong> where you want to move it
				.buttons
					button#item_move_accept.move.disabled
						| Select a Folder
					button#item_move_cancel.cancel
						i.pi-cancel
						| Cancel

| {% endblock %}

| {% block footer_container %}{% endblock %}

| {% block footer_scripts_pre %}

| {% if project.has_method('PUT') %}
| {# JS containing the Edit, Add, Featured, and Move functions #}
script(type="text/javascript", src="{{ url_for('static_pillar', filename='assets/js/project-edit.min.js') }}")
| {% endif %}

script.
	loadProjectSidebar();

	$('body').on('click', '.js-project-sidebar-toggle', function(e){
		e.preventDefault();
		toggleProjectSidebar();
	});

	function updateToggleProjHeaderMenuItem() {
		var $toggle_projheader = $('#item_toggle_projheader');

		if (ProjectUtils.isProject()) {
			$toggle_projheader.hide();
			return;
		}
		if (ProjectUtils.nodeType() == 'asset') {
			$toggle_projheader.show();
		} else {
			$toggle_projheader.hide();
		}
	}
	$(updateToggleProjHeaderMenuItem);

	// Function to update the interface on loadNodeContent, and edit/saving assets
	function updateUi(nodeId, mode) {

		if (mode === 'view') {
			$('.project-mode-view').displayAs('inline-block');
			$('.project-mode-edit').hide();

			$("#node-edit-form").unbind("submit");
			$("#item_save").unbind("click");
			$("#item_cancel").unbind("click");
		} else if (mode === 'edit') {
			$('.project-mode-view').hide();
			$('.project-mode-edit').displayAs('inline-block');
		} else {
			if (console) console.log('Invalid mode:', mode);
		}

		// Prevent flicker by scrolling to top.
		$("#project_context-container").scrollTop(0);

		// Enable specific items under the Add New dropdown
		if (ProjectUtils.nodeType() === 'group') {
			addMenuEnable(['asset', 'group']);

		} else if (ProjectUtils.nodeType() === 'group_texture') {
			addMenuEnable(['group_texture', 'texture']);

		} else if (ProjectUtils.nodeType() === 'group_hdri') {
			addMenuEnable(['group_hdri', 'hdri']);

		} else if (!ProjectUtils.isProject()) {
			addMenuEnable(false);
		}

		updateToggleProjHeaderMenuItem();

		// Set the page title on the document
		var page_title = $('#node-title').text() + " - {{ project.name }} — Blender Cloud";
		DocumentTitleAPI.set_page_title(page_title);

		// TODO: Maybe remove this, now it's also in loadNodeContent(), but double-check
		// it's done like that in all users of updateUi().
		loadingBarHide();
	}
| {% endblock %}

| {% block footer_scripts %}
script(src="{{ url_for('static_pillar', filename='assets/jstree/jstree.min.js') }}")

script.
	{% if show_project %}
	ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: true, nodeId: ''});
	{% else %}
	{% if node %}
	ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: false, nodeId: '{{node._id}}'});
	{% endif %}
	{% endif %}

	var projectTree = document.getElementById('project_tree');

	var urlNodeMove = "{{url_for('projects.move_node')}}";
	var urlNodeFeature = "{{url_for('projects.add_featured_node')}}";
	var urlNodeDelete = "{{url_for('projects.delete_node')}}";
	var urlNodeTogglePublic = "{{url_for('projects.toggle_node_public')}}";
	var urlNodeToggleProjHeader = "{{url_for('projects.toggle_node_project_header')}}";
	var urlProjectDelete = "{{url_for('projects.delete')}}";
	var urlProjectEdit = "{{url_for('projects.edit', project_url=project.url)}}";


	function loadNodeContent(url, nodeId) {

		var $projectContext = $('#project_context')
		$projectContext.trigger('pillar:workStart')

		$.get(url, function(dataHtml) {
			// Update the DOM injecting the generate HTML into the page
			$projectContext.html(dataHtml);
		})
		.done(function(){
			pillar.events.Nodes.triggerLoaded(nodeId);
			updateUi(nodeId, 'view');
		})
		.fail(function(dataResponse) {
			$projectContext.html($('<iframe id="server_error"/>'));
			$('#server_error').attr('src', url);
		})
		.always(function(){
			$projectContext.trigger('pillar:workStop')
			$('.button-edit-icon').addClass('pi-edit').removeClass('pi-spin spin');
		});
	}


	function loadProjectContent(url) {
		var $projectContext = $('#project_context')
		$projectContext.trigger('pillar:workStart')

		$.get(url, function(dataHtml) {
			// Update the DOM injecting the generated HTML into the page
			$projectContext.html(dataHtml);
		})
		.done(function() {
			updateUi('', 'view');
			addMenuEnable();
			addMenuDisable(['texture']);
		})
		.fail(function(dataResponse) {
			$projectContext.html($('<iframe id="server_error"/>'));
			$('#server_error').attr('src', url);
		})
		.always(function(){
			$projectContext.trigger('pillar:workStop')
			$('.button-edit-icon').addClass('pi-edit').removeClass('pi-spin spin');
		});
	}


	function displayStorage(storageNodeId, path) {
		var url = '/nodes/' + storageNodeId + '/view?path=' + path;
		loadNodeContent(url);
	}


	function displayNode(nodeId, pushState) {
		// Remove the 'n_' suffix from the id
		if (nodeId.substring(0, 2) == 'n_') {
			nodeId = nodeId.substr(2);
		}

		var url = '/nodes/' + nodeId + '/view';
		loadNodeContent(url, nodeId);

		// Determine whether we should push the new state or not.
		pushState = (typeof pushState !== 'undefined') ? pushState : true;
		if (!pushState) return;

		// Push the correct URL onto the history.
		var push_state = {nodeId: nodeId, url: url};
		var push_url = '{{url_for("projects.view", project_url=project.url)}}' + nodeId;
		// console.log('Pushing state ', push_state, ' with URL ', push_url);
		window.history.pushState(
				push_state,
				'Node ' + nodeId, // TODO: use sensible title
				push_url
		);
	}

	function redirectToNode(nodeId) {
		var generic_url = '{{ url_for("projects.view_node", project_url=project.url, node_id="theNodeId") }}';
		var node_url = generic_url.replace('theNodeId', nodeId);

		// This makes the user skip the current page when using the 'back' button,
		// i.e. it works as a proper redirect.
		location.replace(node_url);
	}

	window.onpopstate = function(event) {
		var state = event.state;
		// console.log('State popped. location:', document.location, 'state:', state);

		// Deselect any selected node. We'll select the visited node (if any) later on.
		var jstreeAPI = $(projectTree).jstree(true);
		jstreeAPI.deselect_all(true);

		if (state == null) {
			// Went back to the project.
			displayProject();
			return;
		}

		// Went back to a node.
		loadNodeContent(state.url, state.nodeId);

		// Annoying hack because jstreeAPI.select_node() can only suppress the
		// changed.jstree event, and NOT the selected_node.jstree event.
		projectTree.dataset.ignoreSelectNode = true;
		jstreeAPI.select_node('n_' + state.nodeId, true);
		delete projectTree.dataset.ignoreSelectNode;
	};

	function displayProject() {
		var url = "{{url_for('projects.view', project_url=project.url, embed=1)}}";
		loadProjectContent(url);
	}


	function getHashId() {
		if (console)
			console.log('getHashId() should not be used any more!');
	}

	/* Loaded once, on page load */
	function loadContent() {

		var nodeId = ProjectUtils.nodeId();
		var isProject = ProjectUtils.isProject();
		if (isProject) {
			// No need to asynchronously load the project, as it's embedded by Jinja.
			// displayProject() is still needed, though, when people use 'back' to go there.
			if (location.hash) {
				// Handle old-style /p/{url}/#node-ID links, and redirect them to the correct spot.
				redirectToNode(location.hash.substr(1));
			}
			$('.project-mode-view').displayAs('inline-block');
			$('.project-mode-edit').hide();
		} else {
			displayNode(nodeId, false);
		}

		$(projectTree).jstree({
				'core': {
						'data': function (obj, callback) {
								if(obj.id === '#') { //tree root
									if (isProject) {
										$.getJSON("{{url_for('projects.jstree', project_url=project.url)}}", function (jsonObject) {
											callback.call(this, jsonObject['items']);
										});
									} else {
										$.getJSON('/nodes/' + nodeId + '/jstree', function(jsonObject) {
											callback.call(this, jsonObject['items']);
										});
									}
								} else { //normal node
									var childNodeId;
									if (obj.original.type == 'group_storage') {
										childNodeId = obj.original.storage_node;
										$.getJSON('/nodes/' + childNodeId + '/jstree?children=1&path=' + obj.original.path, function(jsonObject) {
											callback.call(this, jsonObject.children);
										});
									} else {
										// Remove the 'n_' suffix from the id
										childNodeId = obj.id.substring(2);
										$.getJSON('/nodes/' + childNodeId + '/jstree?children=1', function(jsonObject) {
												callback.call(this, jsonObject.children);
										});
									}
								}
						}
				},
				"types" : {
						"#": {"valid_children": ["collection"]},
						"chapter" : {"icon": "pi-folder"},
						"group" : {"icon": "pi-folder"},
						"group_texture" : {"icon": "pi-folder-texture"},
						"group_hdri" : {"icon": "pi-folder-texture", "max_children": 0},
						"group_storage" : {"icon": "pi-folder"},
						"filesystem_node" : {"icon": "pi-folder"},
						"file" : {"icon": "pi-document", "max_children": 0},
						"filesystem_file" : {"icon": "pi-document", "max_children": 0},
						"image" : {"icon": "pi-image", "max_children": 0},
						"hdri" : {"icon": "pi-globe", "max_children": 0},
						"texture" : {"icon": "pi-texture", "max_children": 0},
						"video" : {"icon": "pi-film-thick", "max_children": 0},
						"blog" : {"icon": "pi-newspaper", "max_children": 0},
						"page" : {"icon": "pi-document-text", "max_children": 0},
						"default" : {"icon": "pi-document"}
				},
				"plugins": ["types",] //, "state", "sort"
		});


		var jstreeAPI = $(projectTree).jstree(true);

		$(projectTree).on("select_node.jstree", function (e, data) {
			var selectedNodeId = data.node.id.substr(2);

			// Ignore events that can't be suppressed otherwise.
			// This can be removed if jstreeAPI.select_node() allows suppressing
			// the select_node.jstree event.
			if (e.target.dataset.ignoreSelectNode === 'true') return;

			if (typeof(data.node.original.path) === 'undefined') {
				var movingMode = Cookies.getJSON('bcloud_moving_node');

				// Check if we are in the process of moving a node
				if (movingMode) {
					// Allow moving nodes only inside of node_type group
					if (data.node.original.type != 'group' || movingMode.node_id === selectedNodeId || movingMode.node_id === ProjectUtils.parentNodeId()) {

						if (movingMode.node_type === 'texture') {

							if (data.node.original.type === 'group_texture') {
								$('#item_move_accept').html('<i class="pi-check"></i>Move Here').removeClass('disabled');
							} else {
								$('#item_move_accept').html('Select a Texture Folder').addClass('disabled');
							}

						} else if (movingMode.node_type === 'hdri') {

							if (data.node.original.type === 'group_hdri') {
								$('#item_move_accept').html('<i class="pi-check"></i>Move Here').removeClass('disabled');
							} else {
								$('#item_move_accept').html('Select an HDRi Folder').addClass('disabled');
							}

						} else {
							$('#item_move_accept').html('Select a Folder').addClass('disabled');
						}

					} else {
						$('#item_move_accept').html('<i class="pi-check"></i>Move Here').removeClass('disabled');
					}
				}

				// Check the type of node and act accordingly
				if (data.node.original.custom_view) {
					window.location = data.node.a_attr.href;
				} else {
					var currentNodeId = ProjectUtils.nodeId();
					if (currentNodeId != selectedNodeId) {
						displayNode(selectedNodeId);
					}

					jstreeAPI.open_node(data.node);
				}
			} else {
				displayStorage(data.node.original.storage_node, data.node.original.path);
				jstreeAPI.toggle_node(data.node);
			}
		});
	};

	{% if is_embedded_edit is not defined or is_embedded_edit %}
	// Initialize the page if we are not directly editing a node (most of the time)
	loadContent();
	{% endif %}

	var project_container = document.getElementById('project-container');

	/* UI Stuff */
	$(window).on("load resize",function(){
		containerResizeY($(window).height());
	});

	{% if current_user_is_subscriber %}
		$(projectTree).addClass('is_subscriber');
	{% endif %}

| {% endblock %}

| {% block comment_scripts %} {% endblock%}