47 lines
2.5 KiB
HTML
47 lines
2.5 KiB
HTML
{% load i18n %}
|
|
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4" id="imageUploadModal">
|
|
<div class="bg-white rounded-2xl shadow-xl max-w-md w-full">
|
|
<div class="bg-gradient-to-br from-temple-red to-[#7a1a29] text-white rounded-t-2xl p-6 flex justify-between items-center">
|
|
<h5 class="text-lg font-bold flex items-center gap-2">
|
|
<i data-lucide="image" class="w-5 h-5"></i>
|
|
{% trans "Add New Image for Post" %}
|
|
</h5>
|
|
<button type="button" class="text-white/80 hover:text-white transition" onclick="document.getElementById('imageUploadModal').classList.add('hidden')">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="post" action="{% url 'job_image_upload' job.slug %}" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
|
|
<div class="mb-6">
|
|
{{ image_upload_form.as_p }}
|
|
</div>
|
|
|
|
{% if image_upload_form.instance.post_image %}
|
|
<div class="mb-6">
|
|
<p class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Current Image:" %}</p>
|
|
<img src="{{ image_upload_form.instance.post_image.url }}" alt="Post Image"
|
|
class="w-full max-w-[200px] rounded-xl border border-gray-200 shadow-sm">
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="flex gap-3">
|
|
<button type="button" onclick="document.getElementById('imageUploadModal').classList.add('hidden')"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-4 py-2.5 rounded-xl text-sm transition">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Close" %}
|
|
</button>
|
|
<button type="submit" class="flex-1 inline-flex items-center justify-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-medium px-4 py-2.5 rounded-xl text-sm transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% trans "Save changes" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script> |