{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% load static %}
{% block title %}New project{% endblock %}
{% block extrahead %}
	<script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "datetimepicker/bootstrap-datetimepicker.css" %}"/>
{% endblock %}
{% block content %}
	<h1>New project</h1>
	{% if form.non_field_errors %}
		<div class="alert alert-danger">
			Oops! Something went wrong. The project was not created because:<br>
			{{ form.non_field_errors }}
		</div>
	{% endif %}
	<form method="post" action="{% url 'create_project' %}" class="form-horizontal" enctype="multipart/form-data">
		{% csrf_token %}
		<div class="form-group">
			<label for="name" class="control-label col-sm-2"><b>Name</b></label>
			<div class="col-sm-4">
				<input type="text" name="name" id="name" maxlength="100" class="form-control" value="{{ form.name.value|default_if_none:'' }}" autofocus required>
			</div>
			<div class="col-sm-6 form-control-static danger-highlight">
				{{ form.name.errors|striptags }}
			</div>
		</div>
		<div class="form-group">
			<label for="account_search" class="control-label col-sm-2"><b>Account</b></label>
			<div class="col-sm-4">
				<input type="text" id="account_search" name="account" class="form-control" required>
				<input type="button" id="selected_account" class="btn btn-default" onclick="clear_account_selection()" style="display:none">
			</div>
			<div class="col-sm-6 form-control-static danger-highlight">
				{{ form.account.errors|striptags }}
			</div>
		</div>
		<div class="form-group">
            <label for="application_identifier" class="control-label col-sm-2"><b>{{ "projects_and_accounts"|customization:"project_application_identifier_name" }}</b></label>
			<div class="col-sm-4">
				<input type="text" name="application_identifier" id="application_identifier" maxlength="100" class="form-control" value="{{ form.application_identifier.value|default_if_none:'' }}" required>
			</div>
			<div class="col-sm-6 form-control-static danger-highlight">
				{{ form.application_identifier.errors|striptags }}
			</div>
		</div>
		{% if form.fields.discipline.choices.queryset %}
			<div class="form-group">
				<label for="discipline" class="control-label col-sm-2">Discipline</label>
				<div class="col-sm-4">
					<select name="discipline" id="discipline" class="form-control">
						{% for discipline_id, discipline_name in form.fields.discipline.choices %}
							<option value="{{ discipline_id }}" {% if discipline_id == form.discipline.value|to_int %}selected{% endif %}>{{ discipline_name|default_if_none:'' }}</option>
						{% endfor %}
					</select>
				</div>
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form.discipline.errors|striptags }}
				</div>
			</div>
		{% endif %}
        <div class="form-group">
            <label for="start_date" class="control-label col-sm-2">Start date</label>
            <div class="col-sm-4">
				<input type="text" id="start_date" name="start_date" class="form-control" placeholder="Choose a date" value="{{ form.start_date.value|input_date_format }}">
            </div>
            <div class="col-sm-6 form-control-static danger-highlight">
				{{ form.start_date.errors|striptags }}
			</div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="pi_search">PIs</label>
            <div class="col-sm-4">
                <input id="pi_search" type="text" autocomplete="off" class="form-control" placeholder="Add a principal investigator">
            </div>
        </div>
        <div class="form-group">
            <div id="pi-list" class="col-sm-offset-2 col-sm-4">
                This project has no principal investigators.
            </div>
        </div>
		{% if allow_document_upload %}
			<div class="form-group">
				<label for="project_documents" class="control-label col-sm-2">Documents</label>
                <div class="col-sm-4">
					<input type="file" id="project_documents" name="project_documents" class="form-control-static" multiple>
				</div>
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form.project_documents.errors|striptags }}
				</div>
			</div>
		{% endif %}
		<div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="active" {% if form.active.value %}checked{% endif %}> Active
                    </label>
                </div>
            </div>
        </div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
                {% button type="save" value="Create new project" %}
			</div>
		</div>
	</form>
	<script>
        function select_pi(jquery_event, search_selection, dataset_name)
        {
            add_to_list("#pi-list", "remove_pi", search_selection.id, search_selection.name, "remove " + search_selection.name + " as principal investigator", "principal_investigators");
            $("#pi_search").typeahead('val', '');
        }
        function remove_pi(id)
        {
            remove_from_list("#pi-list", "#principal_investigators_" + id, "This project has no principal investigators.")
        }
		function select_account(jquery_event, search_selection, dataset_name)
		{
			$('#account_search').prop('required', false).typeahead('val', search_selection.id).hide();
			$("#selected_account").val(search_selection.name).show();
		}
		function clear_account_selection()
		{
			$("#selected_account").hide();
			$('#account_search').prop('required', true).typeahead('val', '').show().focus();
		}
		window.addEventListener("load", function ()
		{
		    $('#start_date').datetimepicker({format: '{{ date_input_js_format }}'});
            $('#pi_search').autocomplete('pis', select_pi, {{ user_list|json_search_base }});
			$('#account_search').autocomplete('account', select_account, {{ account_list|json_search_base }});
            {% if form.account.value %}
                {% for account in account_list %}
                    {% if account.id == form.account.value|to_int %}select_account(null, {"id": "{{ account.id }}", "name": "{{ account.name }}"});{% endif %}
                {% endfor %}
            {% endif %}
            {% for pi in form.principal_investigators.value %}
                {% for user in user_list %}
                    {% if user.id == pi|to_int %}select_pi(null, {"id": "{{ user.id }}", "name": "{{ user }}"});{% endif %}
                {% endfor %}
            {% endfor %}
		});
	</script>
{% endblock %}