| {% extends 'projects/edit_layout.html'  %}
| {% set title = 'edit_node_types' %}
| {% block page_title %}Node Types: {{ project.name }}{% endblock %}

| {% block project_context %}
#node-edit-container
	#node-edit-form
		.row
			.col-md-12
				h5 Everything is a Node

				p.mb-1.
					Nodes are all the items that can be found in a project.
					A file, a folder, a comment, everything is a node.
					#[br]
					They are defined with custom properties to be properly displayed.

		hr

		.row
			.col-md-4.col-sm-6
				h5 Node Types

				| {% if current_user.has_cap('edit-project-node-types') %}
				ul.list-generic
					| {% for node_type in project.node_types %}
					li
						a.js-item-open.text-muted(
							href="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}",
							data-url="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}")
							| {{ node_type.name | undertitle }}
						.actions
							span {{ node_type.name }}
					| {% endfor %}
				| {% endif %}

			.col-md-8.col-sm-6.border-left
				#node-edit-embed

| {% endblock %}

| {% block footer_scripts %}
script(src="//cdn.jsdelivr.net/g/ace@1.2.3(noconflict/ace.js+noconflict/mode-json.js)")
script.

	$('.js-item-open').on('click', function(e){
		e.preventDefault();

		$('.js-item-open').removeClass('active');
		$(this).addClass('active');

		var item_url = $(this).data('url');

		$.get(item_url, function(item_data) {
			$('#node-edit-embed').html(item_data);
		})
		.fail(function(xhr){
			toastr.error('Failed to open<br/>' + xhr);
		});
	});

| {% endblock footer_scripts %}
