| {% extends 'layout.html' %}
| {% from '_macros/_add_new_menu.html' import add_new_menu %}
include ../mixins/components

| {% block page_title %}{{ project.name }}{% endblock%}
| {% set title = 'project' %}

| {% 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/videojs-6.2.8.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_pillar', filename='assets/css/project-main.css') }}", rel="stylesheet")
| {% endblock %}

| {% block navigation_tabs %}
+nav-secondary()(class="bg-white")
	| {% if project.category == 'course' %}
	li.text-capitalize
		a.nav-link.text-muted.px-0(href="{{ url_for('cloud.courses') }}")
			| Courses
	| {% elif project.category == 'workshop' %}
	li.text-capitalize
		a.nav-link.text-muted.px-0(href="{{ url_for('cloud.workshops') }}")
			| Workshops
	li.px-1
		i.pi-angle-right
	| {% endif %}

	+nav-secondary-link(
		class="px-0",
		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
		| {{ project.name }}

	| {% if project.category == "open_project" %}
	+nav-secondary-link(
		class="active",
		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
		| Explore
	+nav-secondary-link(
		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
		| Blog
	+nav-secondary-link(
		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
		| About
	+nav-secondary-link(
		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
		| Team
	+nav-secondary-link(
		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
		| Awards
	| {% endif %}
| {% endblock navigation_tabs %}

| {% block body %}
#project-container
	#project-side-container
		#project_sidebar.bg-white
			ul.project-tabs.p-0
				//- li.tabs-thumbnail(class="{% if project.picture_square %}image{% endif %}")
				//- 	a(href="{{url_for('projects.view', project_url=project.url)}}")
				//- 		#project-loading
				//- 			i.pi-spin
				//- 		| {% if project.picture_square %}
				//- 		img(src="{{ project.picture_square.thumbnail('b', api=api) }}")
				//- 		| {% else %}
				//- 		i.pi-home
				//- 		| {% endif %}

				li.tabs-browse(
					title="Browse",
					data-toggle="tooltip",
					data-placement="right",
					class="active")
					a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
						i.pi-folder

				| {% if not project.is_private %}
				| {% if current_user_is_subscriber %}
				li.tabs-search(
					title="Search",
					data-toggle="tooltip",
					data-placement="right")
					a(href="{{ url_for('projects.search', project_url=project.url, _external=True)}} ")
						i.pi-search
				| {% else %}
				li.tabs-search(
					title="Search (subscribers only)",
					data-toggle="tooltip",
					data-placement="right")
					a(href="{{ url_for('cloud.join') }}")
						i.pi-search
				| {% endif %}
				| {% endif %}
				| {{ extension_sidebar_links }}

				| {% if project.has_method('PUT') %}
				li(
					title="Edit Project",
					data-toggle="tooltip",
					data-placement="right")
					a(href="{{ url_for('projects.edit', project_url=project.url) }}")
						i.pi-cog
				| {% endif %}


		#project_nav(class="{{ title }}")
			#project_nav-container
				| {% if title != 'about' %}
				//- +nav-secondary(class="bg-white")
				//- 	+nav-secondary-link(
				//- 		class="active",
				//- 		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
				//- 		| {{ project.name }}
				//- #project_nav-header.bg-white

					//- a.project-title.p-2.font-weight-bold.text-dark(
					//- 	href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
					//- 	| {{ project.name }}

				| {% block project_tree %}
				#project_tree.bg-white
				| {% endblock project_tree %}
				| {% endif %}


	#project_context-container.border-left
		| {% if project.has_method('PUT') %}
		#project_context-header.bg-white
			span#status-bar

			ul.project-edit-tools.disabled
				li.dropdown
					button#item_add.project-mode-view.btn.btn-sm.btn-outline-secondary.dropdown-toggle(
						type="button",
						data-toggle="dropdown",
						aria-haspopup="true",
						aria-expanded="false")
						i.button-add-icon.pi-collection-plus
						| New...

					ul.dropdown-menu.add_new-menu
						| {{ add_new_menu(project.node_types) }}

				li.button-edit
					a#item_edit.project-mode-view.btn.btn-sm.btn-outline-secondary.ml-2(
						href="javascript:void(0);",
						title="Edit",
						data-project_id="{{project._id}}")
						i.button-edit-icon.pi-edit
						| Edit Project

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

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

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

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

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

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

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

				li.button-save
					a#item_save.project-mode-edit.btn.btn-outline-success.mx-2(
						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.
	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().
		$('#project-loading').removeAttr('class');
	}
| {% 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) {
		$('#project-loading').addClass('active');
		$.get(url, function(dataHtml) {
			// Update the DOM injecting the generate HTML into the page
			$('#project_context').html(dataHtml);
		})
		.done(function(){
			updateUi(nodeId, 'view');
		})
		.fail(function(dataResponse) {
			$('#project_context').html($('<iframe id="server_error"/>'));
			$('#server_error').attr('src', url);
		})
		.always(function(){
			$('#project-loading').removeAttr('class');
			$('.button-edit-icon').addClass('pi-edit').removeClass('pi-spin spin');
		});
	}


	function loadProjectContent(url) {
		$('#project-loading').addClass('active');

		$.get(url, function(dataHtml) {
			// Update the DOM injecting the generated HTML into the page
			$('#project_context').html(dataHtml);
		})
		.done(function() {
			updateUi('', 'view');
			addMenuEnable();
			addMenuDisable(['texture']);
		})
		.fail(function(dataResponse) {
			$('#project_context').html($('<iframe id="server_error"/>'));
			$('#server_error').attr('src', url);
		})
		.always(function(){
			$('#project-loading').removeAttr('class');
			$('.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-play", "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 ($(window).width() > 480) {
			project_container.style.height = (window.innerHeight - project_container.offsetTop) + "px";
		}
	});

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

| {% endblock %}

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