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

| {% block project_context_header %}
span#project-edit-title
	| Manage team members for this project
| {% endblock %}

| {% block project_context %}
#node-edit-container
	#node-edit-form
		.col-md-6
			| {% if (project.user == current_user.objectid or current_user.has_cap('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 &amp; 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_cap('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_scripts %}
| {% if (project.user == current_user.objectid or current_user.has_cap('admin')) %}
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.autocomplete-0.22.0.min.js') }}")
script.
	$(document).ready(function() {
		function shareWithUser(event, hit, dataset) {
			var $found = $('.sharing-users-item[user-id="' + hit.objectID + '"]');
			if ($found.length) {
				$found.addClass('active');
				setTimeout(function(){ $('.sharing-users-item').removeClass('active');}, 350);
				statusBarSet('info', 'User is already part of the project', 'pi-info');
				return;
			}

			addUser(hit.objectID);
		}

		$('#user-select').userSearch(
			'{{config.ALGOLIA_USER}}',
			'{{config.ALGOLIA_PUBLIC_KEY}}',
			'{{config.ALGOLIA_INDEX_USERS}}',
			shareWithUser
		);
	});
	function addUser(userId){
		if (!userId || userId.length == 0) {
			statusBarSet('error', 'Please select a user from the list', 'pi-warning');
			return;
		}

		$.post("{{url_for('projects.sharing', project_url=project.url)}}",
				{user_id: userId, action: 'add'})
		.done(function (data) {
			var $ul = $("ul.sharing-users-list");
			var $li = $('<li>')
				.addClass('sharing-users-item added')
				.attr('user-id', data._id)
				.appendTo($ul);
			var $div = $('<div>')
				.addClass('sharing-users-avatar')
				.appendTo($li);
			$('<img>')
				.attr('src', data.avatar)
				.attr('alt', 'Avatar')
				.appendTo($div);

			$div = $('<div>')
				.addClass('sharing-users-details')
				.appendTo($li);
			$('<span>')
				.addClass('sharing-users-name')
				.text(data.full_name)
				.appendTo($div);
			$('<span>')
				.addClass('sharing-users-extra')
				.text(data.username)
				.appendTo($div);

			$div = $('<div>')
				.addClass('sharing-users-action')
				.appendTo($li);
			var $button = $('<button>')
				.addClass('user-remove')
				.attr('title', 'Remove this user from your project')
				.appendTo($div);
			$('<i>').addClass('pi-trash').appendTo($button);

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

| {% 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 %}
