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

| {% block project_context %}
#node-edit-container
	#node-edit-form
		.row
			.col-md-12
				h5.mb-1 Team Management

		hr

		.row
			.col-md-6
				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
				| {% if (project.user == current_user.objectid or current_user.has_cap('admin')) %}
				.sharing-users-search
					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 %}

				.border-left.pl-3.mt-4
					h6 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);
				toastr.info('User is already part of the project');
				return;
			}

			addUser(hit.objectID);
		}

		$('#user-select').userSearch(shareWithUser);
	});
	function addUser(userId){
		if (!userId || userId.length == 0) {
			toastr.warning('Please select a user from the list');
			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);
			toastr.success('User added to this project!');
		})
		.fail(function (jsxhr){
			data = jsxhr.responseJSON;
			toastr.error(data.message, 'Could not add user');
		});
	}

| {% 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();
					toastr.success('User removed from this project');
				})
				.fail(function (data){
					toastr.error(data._status, 'Could not remove user');
				});
		}
	});

| {% endblock %}