{% load i18n %}

{% get_current_language as LANGUAGE_CODE %}

{% block widgets %}
	{% spaceless %}
		{% for widget in widget.subwidgets %}
			
			{% if forloop.last and descendants_choice %}
				<div class="classic">
					<input type="checkbox" name="{{ widget.name }}" id="{{ widget.attrs.id }}">&nbsp;<label for="{{ widget.attrs.id }}">{% trans 'include descendants' %}</label>
				</div>
			{% else %}
				{% include widget.template_name %}
			{% endif %}
		{% endfor %}
	{% endspaceless %}
	<div class="form-row mt-2">
		{% if fixed_taxon_source %}
			<input id="{{ widget.attrs.id }}_taxon_source"type="hidden" value="{{ fixed_taxon_source }}" />
		{% else %}
			<div class="col-auto">
				<select id="{{ widget.attrs.id }}_taxon_source" class="form-control">
					{% for choice in taxon_source_choices %}
						<option value="{{ choice.0 }}" {% if widget.subwidgets.0.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
					{% endfor %}
				</select>
			</div>
		{% endif %}
		{% if display_language_field %}
			<div class="col-auto">
				<input id="{{ widget.attrs.id }}_language" type="text" class="form-control" maxlength="2" size="2" value="{{ LANGUAGE_CODE }}" />
			</div>
		{% endif %}
		<div class="col-auto">
			{% block input %}
				<input id="{{ widget.attrs.id }}_verbose" type="text" autocomplete="off" placeholder="{% trans 'search and select taxon' %}" data-base-id="{{ widget.attrs.id }}" class="typeahead form-control {% if widget.subwidgets.1.value %}is-valid{% endif %}" data-provide="typeahead" {% if widget.subwidgets.1.value %}value="{{ widget.subwidgets.1.value }}"{% endif %} />
			{% endblock %}
		</div>
	</div>
{% endblock %}

{% block extra_html %}
	<div id="{{ widget.attrs.id }}_info" class="alert alert-danger text-center" style="display:none;">{% trans 'no taxa found' %}</div>
{% endblock %}

{% block js %}
	<script type="text/javascript">

		(function(){
		
			$("#{{ widget.attrs.id }}_verbose").taxonautocomplete({"base_id":"{{ widget.attrs.id }}", "url":"{{ taxon_search_url }}" });

			{% if final_attrs.value %}
				$.get("{% url 'get_taxon' widget.attrs.value language %}", function(taxon){
				
					if (taxon.vernacular){
						var name = "" + taxon.vernacular + "(" + taxon.taxon_latname + ")";
					}
					else {
						var name = taxon.taxon_latname;
					}
					$("#{{ widget.attrs.id }}_verbose").val(name);
				});
			{% endif %}

			/*$("#id-clear-taxon").on("click", function(ev){
				$("#{{ widget.attrs.id }}_3").val('')
				$("#{{ widget.attrs.id }}_0").val('').removeClass('is-valid');
				$("#{{ widget.attrs.id }}_4").val('')
			});*/
		})()
	</script>
{% endblock %}
