{% load custom_tags_and_filters %}
<div id="user_details">
	{% if not form_details.fields.phone_number.disabled %}
		<div id="details_phone_number" class="form-group">
			<label class="control-label col-sm-2" for="phone_number" {% if form_details.fields.phone_number.required %}style="font-weight: bold !important"{% endif %}>Phone number</label>
			<div class="col-sm-4">
				<input id="phone_number" name="phone_number" autocomplete="off" type="text" class="form-control" value="{{ form_details.fields.phone_number.value|default_if_none:"" }}" {% if form_details.phone_number.required %}required{% endif %}>
			</div>
			{% if form_details.phone_number.errors %}
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form_details.phone_number.errors|striptags }}
				</div>
			{% endif %}
		</div>
	{% endif %}
	{% if not form_details.fields.emergency_contact.disabled %}
		<div id="details_emergency" class="form-group">
			<label class="control-label col-sm-2" for="emergency_contact" {% if form_details.fields.emergency_contact.required %}style="font-weight: bold !important"{% endif %}>Emergency contact</label>
			<div class="col-sm-4">
				<input id="emergency_contact" name="emergency_contact" autocomplete="off" type="text" class="form-control" value="{{ form_details.fields.emergency_contact.value|default_if_none:"" }}" {% if form_details.emergency_contact.required %}required{% endif %}>
			</div>
			{% if form_details.emergency_contact.errors %}
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form_details.emergency_contact.errors|striptags }}
				</div>
			{% endif %}
		</div>
	{% endif %}
	{% if not form_details.fields.race.disabled %}
		<div id="details_race" class="form-group">
			<label class="control-label col-sm-2" for="race" {% if form_details.fields.race.required %}style="font-weight: bold !important"{% endif %}>Race</label>
			<div class="col-sm-4">
				<select id="race" name="race" class="form-control" {% if form_details.fields.race.required %}required{% endif %}>
					{% for t in form_details.fields.race.choices %}
						<option value="{{ t.0 }}" {% if t.0 == form_details.race.value|to_int %}selected{% endif %}>{{ t.1 }}</option>
					{% endfor %}
				</select>
			</div>
			{% if form_details.race.errors %}
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form_details.race.errors|striptags }}
				</div>
			{% endif %}
		</div>
	{% endif %}
	{% if not form_details.fields.gender.disabled %}
		<div id="details_gender" class="form-group">
			<label class="control-label col-sm-2" for="gender" {% if form_details.fields.gender.required %}style="font-weight: bold !important"{% endif %}>Gender</label>
			<div class="col-sm-4">
				<select id="gender" name="gender" class="form-control" {% if form_details.fields.gender.required %}required{% endif %}>
					{% for t in form_details.fields.gender.choices %}
						<option value="{{ t.0 }}" {% if t.0 == form_details.gender.value|to_int %}selected{% endif %}>{{ t.1 }}</option>
					{% endfor %}
				</select>
			</div>
			{% if form_details.gender.errors %}
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form_details.gender.errors|striptags }}
				</div>
			{% endif %}
		</div>
	{% endif %}
	{% if not form_details.fields.ethnicity.disabled %}
		<div id="details_ethnicity" class="form-group">
			<label class="control-label col-sm-2" for="ethnicity" {% if form_details.fields.ethnicity.required %}style="font-weight: bold !important"{% endif %}>Ethnicity</label>
			<div class="col-sm-4">
				<select id="ethnicity" name="ethnicity" class="form-control" {% if form_details.fields.ethnicity.required %}required{% endif %}>
					{% for t in form_details.fields.ethnicity.choices %}
						<option value="{{ t.0 }}" {% if t.0 == form_details.ethnicity.value|to_int %}selected{% endif %}>{{ t.1 }}</option>
					{% endfor %}
				</select>
			</div>
			{% if form_details.ethnicity.errors %}
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form_details.ethnicity.errors|striptags }}
				</div>
			{% endif %}
		</div>
	{% endif %}
</div>
{% if not form_details.fields.groups.disabled %}
	<div id="user_groups">
		<div class="form-group">
			<label class="control-label col-sm-2" for="add_a_group" {% if form_details.fields.groups.required %}style="font-weight: bold !important;"{% endif %}>User groups</label>
			<div class="col-sm-4">
				<input id="add_a_group" type="text" autocomplete="off" class="form-control" placeholder="Add a group"/>
			</div>
			{% if form_details.groups.errors %}
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form_details.groups.errors|striptags }}
				</div>
			{% endif %}
		</div>
		<div class="form-group">
			<div id="group-list" class="col-sm-offset-2 col-sm-4">
				This user has no assigned groups.
			</div>
		</div>
	</div>
{% endif %}
<script>
	let badge_number_element = document.getElementById('badge_number')
	let closest_group = badge_number_element.closest("div.form-group");
	let parent = closest_group.parentNode
    parent.insertBefore(document.getElementById('user_details'), closest_group.nextSibling);

    function add_group(jquery_event, group) {
        if(jquery_event !== null) {
            $(this).typeahead('val', '').focus();
        }
        add_to_list(
            "#group-list",
            "remove_group",
            group.id,
            group.name,
            "Remove this user from " + group.name,
            "groups"
        );
    }
    function remove_group(group_id) {
        remove_from_list(
            "#group-list",
            "#groups_" + group_id,
            "This user has no assigned groups."
        );
    }

    function init_groups() {
        let projects_form_group = $("div.form-group:contains('Projects')");
        $("#user_groups").insertBefore(projects_form_group);

        $('#add_a_group').autocomplete("groups", add_group, {{ groups|json_search_base }});

        {{ user_groups|json_search_base }}.forEach((item, index) => {
            add_group(null, item);
        });
    }

    $(init_groups);
</script>