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

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

{% block generic_content_specific %}
	{% if uses_taxon_profiles_navigation %}
		<div class="card mb-5">
			<div class="card-header">
				<div class="cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapseTaxonNav" role="button" aria-expanded="false" aria-controls="collapseTaxonNav">
					<div class="d-flex">
						<div>
							<h4 class="card-title">{% trans 'Taxonomic Navigation' %}</h4>
						</div>
						<div class="text-end flex-grow-1">
							<img id="CTN-chevron-down" src="{% static 'phosphor-icons/caret-down.svg' %}" class="phicon" />
							<img id="CTN-chevron-up" src="{% static 'phosphor-icons/caret-up.svg' %}" class="phicon" style="display: none;" />
						</div>
					</div>
				</div>
			</div>
			<div class="card-body collapse" id="collapseTaxonNav">
				<div>
					<button type="button" class="btn btn-outline-primary xhr" ajax-target="LargeModalContent" data-url="{% url 'create_taxonprofiles_navigation_entry' meta_app.id generic_content.id %}">
						{% trans 'add toplevel navigation entry' %}
					</button>
				</div>
				<hr>
				<div id="taxon-profiles-navigation" class="mt-3">

				</div>
			</div>
		</div>
		<hr>
	{% endif %}
	<div class="mb-5">
		<div class="row my-3">
			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<div class="cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapseTextManagement" role="button" aria-expanded="false" aria-controls="collapseTextManagement">
							<div class="d-flex">
								<div>
									<h4 class="card-title">{% trans 'Text Management' %}</h4>
								</div>
								<div class="text-end flex-grow-1">
									<img id="CTN-chevron-down" src="{% static 'phosphor-icons/caret-down.svg' %}" class="phicon" />
									<img id="CTN-chevron-up" src="{% static 'phosphor-icons/caret-up.svg' %}" class="phicon" style="display: none;" />
								</div>
							</div>
						</div>
					</div>
					<div class="card-body collapse" id="collapseTextManagement">
						<div id="taxon-texts-management" class="col-12"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<div class="card">
		<div class="card-body">
			<h4 class="card-title">{% trans 'Create your taxon profiles' %}</h4>
			<div>
				<button type="button" class="btn btn-outline-primary xhr" ajax-target="LargeModalContent" data-url="{% url 'create_new_taxon_profile' meta_app.id generic_content.id %}">
					{% trans 'Create taxon profile' %}
				</button>
			</div>
			
		</div>
	</div>

	<div class="mt-5">
		<h3>{% trans 'All Taxon Profiles' %}</h3>
	</div>
	<div class="card mt-3">
		<div class="card-body">
			{% url 'get_all_taxon_profiles_page' meta_app.id content_type.id generic_content.id as pagination_url %}
			<div id="all-taxon-profiles" class="endless_page_template">
				{% include 'taxon_profiles/ajax/all_taxon_profiles_list.html' %}
			</div>
		</div>
	</div>
	
	{% if nature_guide_results %}
		<div class="mt-5">
			<h3>
				{% trans 'Taxa from nature guides' %}
			</h3>
		</div>
		{% for entry in nature_guide_results %}
			<div class="card mt-3">
				<div class="card-header">
					{{ entry.nature_guide }}
					<div class="btn-group dropup">
						<button type="button" class="btn btn-outline-primary btn-xs dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							{% trans 'modify' %} <span class="caret"></span>
						</button>
						<div class="dropdown-menu">
							<a href="{% url 'batch_change_taxon_profile_publication_status' meta_app.id generic_content.id entry.nature_guide.id %}" class="xhr dropdown-item text-center" ajax-target="ModalContent">
								{% blocktrans with name=entry.nature_guide %}Change publication of all taxon profiles of {{ name }}{% endblocktrans %}
							</a>
						</div>
					</div>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-12 col-lg-6">
							<div>
								<strong>
									{% trans 'Identification results with taxonomic reference' %}
								</strong>
							</div>
							{% if entry.results %}
								{% url 'get_nature_guide_taxonprofile_page' meta_app.id content_type.id generic_content.id entry.nature_guide.id 'results' as pagination_url %}
								<div id="ng_taxonlist_{{ entry.nature_guide.id }}" class="endless_page_template">
									{% with nature_guide=entry.nature_guide results=entry.results %}
										{% include 'taxon_profiles/ajax/nature_guide_taxonlist.html' %}
									{% endwith %}
								</div>
							{% else %}
								<div>
									{% trans 'no taxa found' %}
								</div>
							{% endif %}
						</div>
						<div class="col-12 col-lg-6">
							{% if entry.non_taxon_results %}
								<div>
									<div>
										<strong>
											{% trans 'Identification results without taxonomic reference' %}
										</strong>
									</div>
									<div>
										{% trans 'It is recommended to link a taxonomic reference first.' %}
									</div>
									{% url 'get_nature_guide_taxonprofile_page' meta_app.id content_type.id generic_content.id entry.nature_guide.id 'non-taxon-results' as pagination_url %}
									<div id="ng_internal_taxonlist_{{ entry.nature_guide.id }}" class="endless_page_template">
										{% with nature_guide=entry.nature_guide results=entry.non_taxon_results %}
											{% include 'taxon_profiles/ajax/nature_guide_taxonlist.html' %}
										{% endwith %}
									</div>
								</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		{% endfor %}
	{% endif %}
	
	<!--
	<div class="mt-5">
		<h3>
			{% trans 'Taxon Profiles with no occurrence in any nature guide' %}
		</h3>
		{% get_generic_content_option generic_content 'include_only_taxon_profiles_from_nature_guides' as ng_only %}
		{% if ng_only %}
			({% trans 'not included in app' %})
		{% endif %}
	</div>
	<div class="card mt-3">
		<div class="card-body">
			<div id="non_ng_taxa" class="endless_page_template">
				{% include 'taxon_profiles/ajax/non_nature_guide_taxonlist.html' %}
			</div>
		</div>
	</div>
	-->
	<!--
	<div class="mt-5">
		<h3>
			{% trans 'Backbone taxa without profile' %}
		</h3>
	</div>
	<div class="card mt-3">
		<div class="card-body">
			<div id="backbone_taxa_page" class="endless_page_template">
				{% include 'taxon_profiles/ajax/backbone_taxa_taxonlist.html' %}
			</div>
		</div>
	</div>
	-->

	<div class="mt-5">
		<h3 class="text-danger">
			{% trans 'Danger Zone' %}
		</h3>
	</div>
	<div class="card mt-3">
		<div class="card-body">
			<div>
				<button type="button" class="btn btn-outline-danger xhr" ajax-target="ModalContent" data-url="{% url 'delete_all_manually_added_taxon_profile_images' meta_app.id generic_content.id %}">{% trans 'Delete all Taxon Profile images that have been added manually' %}</button>
			</div>
			<div class="mt-3">
				{% trans 'This will delete all manually added images across all taxon profiles.' %}
			</div>
		</div>
	</div>
{% endblock %}

{% block extra_script %}

	<script>
		
		{% for entry in nature_guide_results %}
			$('#ng_taxonlist_{{ entry.nature_guide.id }}').endlessPaginate({
				onCompleted: function() {
					ajaxify('ng_taxonlist_{{ entry.nature_guide.id }}');
				}
			});
			$('#ng_internal_taxonlist_{{ entry.nature_guide.id }}').endlessPaginate({
				onCompleted: function() {
					ajaxify('ng_taxonlist_{{ entry.nature_guide.id }}');
				}
			});
		{% endfor %}

		/*
		$('#non_ng_taxa').endlessPaginate({
			onCompleted: function() {
				ajaxify('non_ng_taxa');
			}
		});
		*/

		$('#all-taxon-profiles').endlessPaginate({
			onCompleted: function() {
				ajaxify('all-taxon-profiles');
			}
		});

		$.get("{% url 'get_taxonprofiles_navigation' meta_app.id generic_content.id %}", (html) => {
			$("#taxon-profiles-navigation").html(html);
			ajaxify('taxon-profiles-navigation');
			
		});


		$('#collapseTaxonNav').on('hide.bs.collapse', function () {
			$("#CTN-chevron-up").hide();
			$("#CTN-chevron-down").show();
		});

		$('#collapseTaxonNav').on('show.bs.collapse', function () {
			$("#CTN-chevron-up").show();
			$("#CTN-chevron-down").hide();
		});

		$.get("{% url 'get_taxon_texts_management' meta_app.id generic_content.id %}", (html) => {
			$("#taxon-texts-management").html(html);
			ajaxify('taxon-texts-management');
		});


	</script>

{% endblock %}