{% load i18n static localcosmos_tags %}
{% if text_types %}
<form id="taxon-text-types-form" method="POST" action="{% url 'manage_taxon_profile' meta_app.id taxon_profile.id %}"
>{% csrf_token %}
	<div id="text-types-form-fields">
		{% for field in form %}
			{% if field.field.category %}
				<h2>
					{{ field.field.category }}
				</h2>
			{% endif %}
			<div class="row">
				<div class="col-12">

					{% if field.is_hidden %}
						{{ field }}
					{% else %}
						<div class="form-group {% if field.errors %}has-error{% endif %}">

							<h4>
								{{ field.label }}
								{% if field.field.taxon_text_type %}
									{% if show_text_length_badges %}{% if field.field.is_short_version %}<span class="badge rounded-pill  bg-info">{% trans 'short version' %}</span>{% else %}<span class="badge rounded-pill  bg-primary">{% trans 'long version' %}</span>{% endif %} {% endif %}
								{% endif %}
							</h4>

							{% if field.field.language %}
								<img src="{% static 'localcosmos_server/images/countries/' %}{{ field.field.language }}.gif" /> {{ field.field.language }}
							{% endif %}

							{{ field }}
							{% if field.help_text %}
								<small class="form-text text-muted">{{ field.help_text }}</small>
							{% endif %}
						</div>

						{% if field.field.taxon_text and field.field.is_short_version %}
							{% with content_instance=field.field.taxon_text %}
								<div id="content-images-list-{{ content_instance|ctype_id }}-{{ content_instance.id }}" class="taxon-text-images-container">
									{% include 'app_kit/ajax/content_images_list.html' %}
								</div>
							{% endwith %}
						{% endif %}
						<br><br>
					{% endif %}
				</div>
			</div>
		{% endfor %}
	</div>

	<div class="row">
		<div class="col-12 text-center">
			{% if saved %}
				<div class="alert alert-success">
					{% trans 'Successfully saved texts.' %}
				</div>
			{% endif %}
		</div>
	</div>
	<div class="row my-3">
		<div class="col-12 text-center">
			<button type="submit" class="btn btn-outline-primary">{% trans 'Save texts' %}</button>
		</div>
	</div>
</form>

<script>
	(function(){
		
	const short_profile_field = document.getElementById('id_short_profile');

	ClassicEditor.create( short_profile_field, { 
		toolbar: ['bold', 'italic', 'underline', '|', 'undo', 'redo']
	});

	{% for field_name in form.layoutable_simple_fields %}
		var field = document.getElementById('id_{{ field_name }}');

		ClassicEditor.create( field, { 
			toolbar: ['bold', 'italic', 'underline', '|', 'bulletedList', 'numberedList', '|', 'blockquote', '|', 'undo', 'redo']
		});
	{% endfor %}

		document.getElementById('taxon-text-types-form').addEventListener('submit', function(event) {
			event.preventDefault(); // Stop form from submitting normally
			const formData = new FormData(this);
			fetch(event.target.getAttribute('action'), {
				method: 'POST',
				body: formData
			}).then(response => {
				if (window.history.replaceState) {
					window.history.replaceState(null, null, window.location.href);
				}
				window.location.reload();
			});
		});

	})();
</script>
{% endif %}