{% extends 'localcosmos_server/modals/large_modal_form.html' %}

{% load i18n localcosmos_tags %}

{% block above %}
	<form method="POST" action="{% block base_url %}{% url 'manage_server_content_image' content_type.id content_instance.id image_type %}{% endblock %}?{% if new %}new=1&{% endif %}{% if content_image_taxon %}taxon_source={{ content_image_taxon.taxon_source }}&taxon_latname={{ content_image_taxon.taxon_latname }}&taxon_author={{ content_image_taxon.taxon_author }}{% endif %}" enctype="multipart/form-data" class="xhr">{% csrf_token %}
{% endblock %}

{% block title %}
	{% trans 'Manage image' %}
{% endblock %}

{% block body %}
	<p>
		{% if request.method == 'POST' and form.is_valid %}
		{% else %}
			{% render_bootstrap_form form %}
		{% endif %}
	</p>
{% endblock %}

{% block footer %}
	<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{% trans 'Cancel' %}</button>
	{% if content_image %}
		<a href="#" data-url="{% block delete_url %}{% url 'delete_content_image' content_image.pk %}{% endblock %}" ajax-target="ModalContent" class="btn btn-danger xhr">{% trans 'Delete' %}</a>
	{% endif %}
	<button type="submit" class="btn btn-outline-primary">{% trans 'Save' %}</button>
{% endblock %}

{% block script %}

	{% block extra_script %}{% endblock %}

	<script>

		{% if request.method == 'POST' and form.is_valid %}
			
			var d = new Date();

			var image_container = document.getElementById("content_image_{{ content_instance|ctype_id }}_{{ content_instance.id }}");
			
			if (image_container == null){
				image_container = document.getElementById("content_image_{{ content_instance|ctype_id }}_{{ content_instance.id }}_{{ image_type }}");
			}
			

			if (image_container != null){
				image_container.style.backgroundImage = "url('{% content_image_url content_instance image_type %}?" + d.getTime() + "')";
			}
			else {
				console.log("Could not find image container for content image")
			}

			$("#LargeModal").modal("hide");
			$("#LargeModalContent").empty();
		{% else %}
			{% include 'localcosmos_server/snippets/ckeditor_js_snippet.html' %}
		{% endif %}
	</script>

	<style>
		.ck-editor__editable {
			min-height: 50px;
		}
	</style>

	
{% endblock %}