{% extends 'app_kit/base.html' %}
{% load i18n static app_tags localcosmos_tags %}

{% block extra_style %}{% endblock %}
{% block extra_head_script %}
	<script src="{% static 'app_kit/ckeditor5/build/ckeditor.js' %}"></script>
{% endblock%}

{% block content %}
	<div class="container">
		<div class="row align-items-center mb-4">
			<div class="col-auto">
				<br>

				{% if vernacular_name_from_nature_guides %}
					<h3>
						{{ vernacular_name_from_nature_guides }}
						{% if taxon_profile.morphotype %}
							({{ taxon_profile.morphotype }})
						{% endif %}
					</h3>
					<i>{{ taxon }}</i>
				{% elif taxon.vernacular %}
					<h3>
						{{ taxon.vernacular }}
						{% if taxon_profile.morphotype %}
							({{ taxon_profile.morphotype }})
						{% endif %}
					</h3>
					<i>{{ taxon }}</i>
				{% else %}
					<h3>
						<i>{{ taxon }}</i>
						{% if taxon_profile.morphotype %}
							({{ taxon_profile.morphotype }})
						{% endif %}
					</h3>
				{% endif %}
			</div>
			<div class="col-auto">
				<small>
					<div class="btn-group">
						<button type="button" class="btn btn-xs btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							{% trans 'Modify' %}
						</button>
						<div class="dropdown-menu">
							<a class="dropdown-item xhr" data-url="{% url 'change_taxon_profile_publication_status' meta_app.id taxon_profile.id %}" ajax-target="ModalContent">{% trans 'Change publication status' %}</a>
							<a class="dropdown-item xhr" data-url="{% url 'manage_app_kit_seo_parameters' meta_app.id taxon_profile|ctype_id taxon_profile.id %}" ajax-target="ModalContent">{% trans 'SEO' %}</a>
							<a class="dropdown-item xhr" data-url="{% url 'delete_taxon_profile' meta_app.id taxon_profile.id %}" ajax-target="ModalContent">{% trans 'delete' %}</a>
						</div>
					</div>
				</small>
			</div>
			<div class="col">
				{% if taxon_profile.is_featured %}
					<span class="badge rounded-pill  bg-primary">{% trans 'featured' %}</span>
				{% endif %}
				{% if taxon_profile.publication_status == 'draft' %}
					<span class="badge rounded-pill text-bg-warning">{% trans 'draft' %}</span>
				{% endif %}
				{% if nature_guides %}
					{% for nature_guide in nature_guides %}
					<span class="badge rounded-pill  bg-success">
						{{ nature_guide }}
					</span>
					{% endfor %}
				{% else %}
					<span class="badge rounded-pill text-bg-warning">
						{% trans 'does not occur in any nature guide' %}
					</span>
				{% endif %}
				{% if taxon_profile.taxon.taxon_source == 'app_kit.features.nature_guides' %}
					<span class="badge rounded-pill text-bg-warning">
						{% trans 'not linked to any taxonomic source' %}
					</span>
				{% else %}
					<span class="badge rounded-pill  bg-success">
						{{ taxon_tree_model }}
					</span>
				{% endif %}
				
			</div>
		</div>
		{% if taxon_profile.morphotype %}
		{% else %}
			<div class="row">
				{% if possible_duplicates %}
					<div class="col-12">
						<div class="alert alert-warning">
							<div>
								{% trans 'This profile has possible duplicates' %}:
							</div>
							{% for duplicate in possible_duplicates %}
								<i>
									<a href="{% url 'manage_taxon_profile' meta_app.id duplicate.id %}">{{ duplicate.taxon_latname }} {{ duplicate.taxon_author }}</a>
								</i>
							{% endfor %}
						</div>
					</div>
				{% endif %}
				<div class="col-12 mt-3">
					<div>
						{% with content_object=taxon_profile %}
							{% include 'app_kit/ajax/tags.html' %}
						{% endwith %}
					</div>
					<div class="mt-3">
						<button type="button" class="btn btn-sm btn-outline-primary xhr" data-url="{% url 'tag_any_element' content_type.id taxon_profile.id %}" ajax-target="ModalContent">{% trans 'manage tags' %}</button>
					</div>
					<hr>
				</div>
			</div>
		{% endif %}
		{% if taxon_profile.morphotype and taxon_profile.parent_profile %}
			<div class="row">
				<div class="col-12">
					{% trans 'This is a morphotype of:' %} <a href="{% url 'manage_taxon_profile' meta_app.id taxon_profile.parent_profile.id %}">
						{{ taxon }}
					</a>
				</div>
			</div>
		{% else %}
			<div class="row mb-5">
				<div class="col-12">
					<div class="card">
						<div class="card-header">
							{% trans 'Morphotypes' %}
						</div>
						<div class="card-body">
							<div class="mb-3">
								{% if taxon_profile.morphotype_profiles %}
									{% for morphotype in taxon_profile.morphotype_profiles %}
										<div>
											<a href="{% url 'manage_taxon_profile' meta_app.id morphotype.id %}">
												{{ morphotype.morphotype }}
											</a>
										</div>
									{% endfor %}
								{% else %}
									<div class="text-muted">
										{% trans 'No morphotypes available.' %}
									</div>
								{% endif %}
							</div>
							<div>
								<button type="button" class="btn btn-outline-primary xhr" data-url="{% url 'manage_taxon_profile_morphotype' meta_app.id taxon_profiles.id taxon_profile.id %}" ajax-target="ModalContent">
									{% trans 'Add morphotype' %}
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		{% endif %}
		{% if taxon_profile.morphotype %}
		{% else %}
			<div class="row">
				<div class="col-12">
					<div class="card">
						<div class="card-header">
							{% trans 'Classification' %}
						</div>
						<div class="card-body">
							<div>
								<h5>{{ taxon_tree_model }}</h5>
								{% if taxonomic_branch %}
									<div>
										<small>
											{% for node in taxonomic_branch %}
												<span>{{ node }}</span> &rarr;
											{% endfor %}
											<span>{{ taxon }}</span>
										</small>
									</div>
								{% endif %}
								{% if navigation_branches %}
									<div class="mt-4">
										<h5>{% trans 'Taxonomic Navigation' %}</h5>
										{% for branch in navigation_branches %}
											<div>
												<small>
													{% for node in branch %}
														<span>{{ node }}</span> &rarr;
													{% endfor %}
													<span>{{ taxon }}</span>
												</small>
											</div>
										{% endfor %}
									</div>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row mt-5">
				<div class="col-12">
					<div class="card">
						<div class="card-header">
							{% trans 'Vernacular names' %}
						</div>
						<div class="card-body">
							<div id="collected-vernacular-names"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row mt-5">
				<div class="col-12">
					<div class="card">
						<div class="card-header">
							{% trans 'Taxon Relationships' %}
						</div>
						<div class="card-body">
							<div>
								{% render_taxon_relationships meta_app taxon %}
							</div>
						</div>
					</div>
				</div>
			</div>
			<hr>
			<div class="row">
				<div class="col-12">
					<h4>{% trans 'Traits' %}</h4>
					<div id="taxon-traits"><img src="{% static 'app_kit/images/spinner.gif' %}" /></div>
				</div>
			</div>
		{% endif %}
		<hr>
		<div class="row">
			<div class="col-12">

				<div class="card">
					<div class="card-header">
						{% trans 'Images' %}
					</div>
					<div class="card-body">
						<div>
							<div id="taxon-images"><img src="{% static 'app_kit/images/spinner.gif' %}" /></div>
						</div>
						<div class="mt-3">
							<button type="button" class="btn btn-outline-primary xhr" data-url="{% url 'manage_taxon_profile_image' meta_app.id taxon_profile|ctype_id taxon_profile.id %}?taxon_source={{ taxon.taxon_source }}&name_uuid={{ taxon.name_uuid }}&new=1" ajax-target="LargeModalContent">{% trans 'Add image with text' %}</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-12">

				<div class="card">
					<div class="card-header">
						{% trans 'External Media' %}
					</div>
					<div class="card-body">
						<div id="external-media">
							{% render_external_media meta_app taxon_profile %}
						</div>
					</div>
				</div>
			</div>
		</div>
		<hr>
		<div class="row mt-5">
			<div class="col-12">
				<div class="card mb-5">
					<div class="card-header">
						{% trans 'Text Set' %}
					</div>
					<div class="card-body">
						<div class="text-muted my-3">
							{% trans 'The selected Text Set defines which text fields are used for this taxon profile. If no Text Set is selected, all fields will be used.' %}
						</div>
						<div id="set-taxon-text-set">

						</div>
					</div>
				</div>
			</div>
			<div id="taxontexts" class="col-12">
				{% include 'taxon_profiles/ajax/manage_taxon_profile_form.html' %}
			</div>
		</div>
		<hr>
		<div class="row my-3">
			<div class="col-12">
				<div class="card">
					<div class="card-header">
						{% trans 'Template Contents' %}
					</div>
					<div class="card-body">
						<div>
							{% trans 'This taxon is linked to the following Template Contents:' %}
						</div>
						<div class="mt-3">
							{% if template_contents %}
								<ul>
									{% for ltc in template_contents %}
										<li>
											<strong>
												{% if ltc.template_content.is_published %}
													{{ ltc.published_title }} <span class="badge rounded-pill  bg-success">{% trans 'published' %}</span>
												{% else %}
													{{ ltc.draft_title }} <span class="badge rounded-pill text-bg-warning">{% trans 'draft' %}</span>
												{% endif %}
											</strong>
										</li>
									{% endfor %}
								</ul>
							{% else %}
								<p>{% trans 'No template contents found.' %}</p>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		</div>
		<hr>
		<div class="row my-3">
			<div class="col-12 text-center">
				<a href="{% url taxon_profiles.manage_url meta_app.id taxon_profiles|ctype_id taxon_profiles.id %}" class="btn btn-primary">{% blocktrans with name=taxon_profiles %}Back to {{ name }}{% endblocktrans  %}</a>
			</div>
		</div>
	</div>
{% endblock %}

{% block extra_script %}

	<script>


		{% if taxon_profile.morphotype %}
			$.get("{% url 'collect_taxon_images' meta_app.id taxon_profile.id taxon.taxon_source taxon.name_uuid taxon_profile.morphotype %}", function(html){
				$("#taxon-images").html(html);
				ajaxify('taxon-images');
			});
		{% else %}
			$.get("{% url 'collect_taxon_images' meta_app.id taxon_profile.id taxon.taxon_source taxon.name_uuid %}", function(html){
				$("#taxon-images").html(html);
				ajaxify('taxon-images');
			});
		{% endif %}

		$.get("{% url 'collect_taxon_traits' meta_app.id taxon.taxon_source taxon.name_uuid %}", function(html){
			$("#taxon-traits").html(html);
		});

		$.get("{% url 'set_taxon_text_set_for_taxon_profile' meta_app.id taxon_profiles.id taxon_profile.id %}", function(html){
			$("#set-taxon-text-set").html(html);
			ajaxify('set-taxon-text-set');
		});

		{% include 'backbonetaxonomy/ajax/reload_collected_vernacular_names_js.html' %}
		

		(function(){
			$(".move-em-forwardbutton").on("click", positionmanager.onMoveForward);
			$(".move-em-backwardbutton").on("click", positionmanager.onMoveBack);
		})();

	</script>

	
	
{% endblock %}