| {% extends 'layout.html' %}

| {% set title = 'sharing' %}

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

| {% block body %}
#project-container
	#project-side-container
		#project_sidebar
			ul.project-tabs
				li.tabs-thumbnail(
					title="About",
					data-toggle="tooltip",
					data-placement="left",
					class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}")
					a(href="{{url_for('projects.about', project_url=project.url, _external=True)}}")
						#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="left")
					a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
						i.pi-tree-flow
				| {% if not project.is_private %}
				li.tabs-search(
					title="Search",
					data-toggle="tooltip",
					data-placement="left")
					a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}")
						i.pi-search
				| {% endif %}

				.project_nav-toggle-btn(
					title="Expand Navigation [T]",
					data-toggle="tooltip",
					data-placement="right")
					i.pi-angle-double-left

		#project_nav
			#project_nav-container
				#project_nav-header
					.project-title
						a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
							| {{ project.name }}

				// TODO - make list a macro
				#project_tree.edit
					ul.project_nav-edit-list
						li(class="{% if title == 'edit' %}active{% endif %}")
							a(href="{{ url_for('projects.edit', project_url=project.url) }}")
								i.pi-list
								| Overview
						li(class="{% if title == 'sharing' %}active{% endif %}")
							a(href="{{ url_for('projects.sharing', project_url=project.url) }}")
								i.pi-share
								| Sharing
						li(class="{% if title == 'edit_node_types' %}active{% endif %}")
							a(href="{{ url_for('projects.edit_node_types', project_url=project.url) }}")
								i.pi-puzzle
								| Node Types

				.project_split(title="Toggle Navigation [T]")

	#project_context-container
		#project_context-header
			span#project-statusbar

			span#project-edit-title
				| Manage team members for this project

		#project_context
			#node-edit-container
				#node-edit-form
					.col-md-6
						| {% if (project.user == current_user.objectid or current_user.has_role('admin')) %}
						.sharing-users-search
							.form-group
								input#user-select.form-control(
									name='contacts',
									type='text',
									placeholder='Add team members by name')
						| {% else %}
						.sharing-users-search
							.disabled Only project owners & admins can manage users
						| {% endif %}


						ul.sharing-users-list
							| {% for user in users %}
							li.sharing-users-item(
								user-id="{{ user['_id'] }}",
								class="{% if current_user.objectid == user['_id'] %}self{% endif %}")
								.sharing-users-avatar
									img(src="{{ user['avatar'] }}")
								.sharing-users-details
									span.sharing-users-name
										| {{user['full_name']}}
										| {% if project.user == user['_id'] and current_user.objectid == user['_id'] %}
										small (You, owner)
										| {% elif project.user == user['_id'] %}
										small (Owner)
										| {% elif current_user.objectid == user['_id'] %}
										small (You)
										| {% endif %}
									span.sharing-users-extra {{user['username']}}
								.sharing-users-action
									| {# Only allow deletion if we are: admin, project owners, or current_user in the team #}
									| {% if current_user.has_role('admin') or (project.user == current_user.objectid) or (current_user.objectid == user['_id']) %}

									| {% if project.user == user['_id'] %}
									span
										i.pi-happy(title="Hi boss!")
									| {% elif current_user.objectid == user['_id'] %}
									button.user-remove(title="Leave this project") Leave
									| {% else %}
									button.user-remove(title="Remove this user from your project")
										i.pi-trash
									| {% endif %}

									| {% endif %}
							| {% endfor %}

					.col-md-6
						.sharing-users-info
							h4 What can team members do?
							p.
								Team members are able to upload new content to the project,
								as well as view, edit, delete, and comment on the content
								previously created.

| {% endblock %}

| {% block footer_navigation %}
| {% endblock %}

| {% block footer_scripts %}
| {% if (project.user == current_user.objectid or current_user.has_role('admin')) %}
script(src='//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js')
script.
	$(document).ready(function() {
		var APPLICATION_ID = '{{config.ALGOLIA_USER}}'
		var SEARCH_ONLY_API_KEY = '{{config.ALGOLIA_PUBLIC_KEY}}';
		var INDEX_NAME = '{{config.ALGOLIA_INDEX_USERS}}';
		var client = algoliasearch(APPLICATION_ID, SEARCH_ONLY_API_KEY);
		var index = client.initIndex(INDEX_NAME);

		$('#user-select').autocomplete({hint: false}, [
			{
				source: function (q, cb) {
					index.search(q, {hitsPerPage: 5}, function (error, content) {
						if (error) {
							cb([]);
							return;
						}
						cb(content.hits, content);
					});
				},
				displayKey: 'full_name',
				minLength: 2,
				limit: 10,
				templates: {
					suggestion: function (hit) {
						return hit._highlightResult.full_name.value + ' (' + hit._highlightResult.username.value + ')';
					}
				}
			}
		]).on('autocomplete:selected', function (event, hit, dataset) {

			var lis = document.getElementsByClassName('sharing-users-item');
			var has_match = false;

			for (var i = 0; i < lis.length; ++i) {

				// Check if the user already is in the list
				if ($(lis[i]).attr('user-id') == hit.objectID){

					$(lis[i]).addClass('active');
					setTimeout(function(){ $('.sharing-users-item').removeClass('active');}, 350);
					statusBarSet('info', 'User is already part of the project', 'pi-info');

					has_match = false;
					break;
				} else {
					has_match = true;
					continue;
				}
			};

			if (has_match){
				addUser(hit.objectID);
			}

		});


		function addUser(userId){
			if (userId && userId.length > 0) {
				$.post("{{url_for('projects.sharing', project_url=project.url)}}",
								{user_id: userId, action: 'add'})
					.done(function (data) {

						$("ul.sharing-users-list").prepend('' +
							'<li class="sharing-users-item" user-id="' + data._id + '">' +
								'<div class="sharing-users-avatar">' +
									'<img src="' + data.avatar  + '">'+
								'</div>' +
								'<div class="sharing-users-details">' +
									'<span class="sharing-users-name">' + data.full_name + '</span>' +
									'<span class="sharing-users-extra">' + data.username + '</span>' +
								'</div>' +
								'<div class="sharing-users-action">' +
									'<button title="Remove this user from your project" class="user-remove">'+
										'<i class="pi-trash"></i>'+
									'</button>'+
								'</div>'+
							'</li>');

						$("ul.sharing-users-list").find("[user-id='" + userId + "']").addClass('added');
						setTimeout(function(){ $('.sharing-users-item').removeClass('added');}, 350);
						statusBarSet('success', 'User added to this project!', 'pi-grin');
					})
					.fail(function (jsxhr){
						data = jsxhr.responseJSON;
						statusBarSet('error', 'Could not add user (' + data.message + ')', 'pi-warning');
					});
			} else {
				statusBarSet('error', 'Please select a user from the list', 'pi-warning');
			}
		};



	});

| {% endif %}
script.
	$(document).ready(function() {
		$('body').on('click', '.user-remove', function(e) {
			var userId = $(this).parent().parent().attr('user-id');
			removeUser(userId);
		});

		function removeUser(userId){
			$.post("{{url_for('projects.sharing', project_url=project.url)}}",
							{user_id: userId, action: 'remove'})
				.done(function (data) {
					$("ul.sharing-users-list").find("[user-id='" + userId + "']").remove();
					statusBarSet('success', 'User removed from this project', 'pi-trash');
				})
				.fail(function (data){
					statusBarSet('error', 'Could not remove user (' + data._status + ')', 'pi-warning');
				});
		}
	});

| {% endblock %}