{% extends 'app_kit/ajax/content_image_form.html' %}
{% load i18n localcosmos_tags %}

{% block base_url %}
	{% if content_image %}{% url 'manage_content_images_with_text' meta_app.id content_image.id %}{% else %}{% url 'manage_content_images_with_text' meta_app.id content_type.id content_instance.id %}{% endif %}
{% endblock %}


{% block footer %}
	<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
	{% if content_image %}
		<a href="#" data-url="{% block delete_url %}{% url 'delete_content_images' meta_app.id 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 %}
			
			// reload the whole images set
            $.get("{% url 'content_images_list' meta_app.id content_type.id content_instance.id %}", function(html){

                const container_id = 'content-images-list-{{ content_instance|ctype_id }}-{{ content_instance.id }}';

                $("#" + container_id).html(html);
                ajaxify(container_id);
            });

			hideLargeModal();
		{% else %}
			{% include 'localcosmos_server/snippets/ckeditor_js_snippet.html' %}
		{% endif %}
	</script>

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

	
{% endblock %}