{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% block title %}Accounts and projects{% endblock %}
{% block content %}
    <div class="h1 row">
        <div class="col-xs-6 col-sm-7">Accounts and projects</div>
        <div class="col-sm-5 text-right">
            {% button type="add" value="New project" url="create_project" %}
            {% button type="add" value="New account" url="create_account" %}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-5" id="search_container">
            <input id="search"
                   type="text"
                   aria-label="Search for account or project"
                   placeholder="Search for an account or project"
                   class="form-control"
                   autofocus>
        </div>
    </div>
    {% if account %}
        <div class="row">
            <div class="col-sm-12">
                {% if not selected_project %}
                    <h2>
                        {{ account }}
                        <form style="display:inline" method="post" action="{% url 'toggle_active' 'account' account.id %}">
                            {% csrf_token %}
                            {# Using an 'input submit' element would be preferable to an anchor on the following line, but Bootstrap can't style a 'submit' as a label so you have to use an anchor. #}
                            <a onclick="$(this).closest('form').submit()"
                               class="label {% if account.active %}label-success{% else %}label-danger{% endif %}"
                               style="vertical-align:50%;
                                      font-size:small">
                                {% if account.active %}
                                    Active
                                {% else %}
                                    Inactive
                                {% endif %}
                            </a>
                        </form>
                    </h2>
                {% endif %}
                {% regroup account_projects by active as grouped_projects %}
                {% for group in grouped_projects %}
                    {% if group.grouper %}
                        {% for project in group.list %}
                            {% if not selected_project or project == selected_project %}
                                {% include 'accounts_and_projects/project.html' %}
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        {% if not selected_project %}
                            <div class="h3">
                                <a onclick="toggle_details(this)"
                                   data-toggle="collapse"
                                   data-target="#inactives_details"
                                   class="pointer"
                                   style="text-decoration:none">
                                    <span id="inactives_chevron"
                                          class="glyphicon {% if selected_project %}glyphicon-chevron-down{% else %}glyphicon-chevron-right{% endif %} pull-left chevron"></span>
                                    <span class="label label-danger" style="vertical-align: 15%">Inactive projects</span>
                                </a>
                            </div>
                            <div style="margin-left:34px">
                                <div id="inactives_details" class="collapse {% if selected_project %}in{% endif %}">
                                {% endif %}
                                {% for project in group.list %}
                                    {% if not selected_project or project == selected_project %}
                                        {% include 'accounts_and_projects/project.html' %}
                                    {% endif %}
                                {% endfor %}
                                {% if not selected_project %}
                                </div>
                            </div>
                        {% endif %}
                    {% endif %}
                {% empty %}
                    <h4>This account does not have any projects</h4>
                {% endfor %}
            </div>
        </div>
    {% endif %}
    <script>
		function get_project_or_account(jquery_event, search_selection, dataset_name)
		{
			if(search_selection.type === 'project')
				window.location.href = "{% url 'project' 999 %}".replace('999', search_selection.id);
			else if(search_selection.type === 'account')
				window.location.href = "{% url 'account' 999 %}".replace('999', search_selection.id);
		}
		function add_user_to_project(jquery_event, search_selection, dataset_name)
		{
			let project_id = $(this).data('project-id');
			$(this).typeahead('val', '').focus();
			let complete_callback = ajax_complete_callback('Unable to add user to project');
			$("#project_" + project_id + "_users").load("{% url 'add_user_to_project' %}", {'user_id': search_selection.id, 'project_id': project_id, 'csrfmiddlewaretoken': '{{ csrf_token }}'}, complete_callback);
		}
		function remove_user_from_project(user_id, project_id)
		{
			let complete_callback = ajax_complete_callback('Unable to remove user from project');
			$("#project_" + project_id + "_users").load("{% url 'remove_user_from_project' %}", {'user_id': user_id, 'project_id': project_id, 'csrfmiddlewaretoken': '{{ csrf_token }}'}, complete_callback);
		}
        function add_document_to_project(project_id, form)
        {
            let complete_callback = ajax_complete_callback('Unable to add document to project');
            $("#project_" + project_id + "_documents").load_multipart(form.action, form, complete_callback);
		}
        function remove_document_from_project(url, project_id)
		{
			let complete_callback = ajax_complete_callback('Unable to remove document from project');
			$("#project_" + project_id + "_documents").load(url, {'csrfmiddlewaretoken': '{{ csrf_token }}'}, complete_callback);
		}
        function reset_autocomplete()
        {
			$('.user_search').autocomplete('users', add_user_to_project, {{ users|json_search_base }});
        }
		function on_load()
		{
			$('#search').autocomplete('accounts_and_projects', get_project_or_account, {% json_search_base_with_extra_fields accounts_and_projects 'application_identifier' display='display_with_status' %});
            reset_autocomplete();
		}
		window.addEventListener('load', on_load, true);
	
    </script>
    <style>
		#search_container .tt-dropdown-menu
		{
			min-width: 400px;
			max-height: 600px;
		}
	
    </style>
{% endblock %}
