89 lines
5.0 KiB
HTML
89 lines
5.0 KiB
HTML
{% load static %}
|
|
{% load file_filters %}
|
|
{% load i18n %}
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<div class="flex items-center justify-between p-4 border-b border-gray-200 bg-gray-50">
|
|
<h5 class="text-sm font-bold text-temple-red flex items-center gap-2">
|
|
<i data-lucide="folder-open" class="w-5 h-5"></i>
|
|
{% trans "Documents" %}
|
|
</h5>
|
|
<button type="button"
|
|
class="upload-modal-trigger inline-flex items-center gap-2 bg-temple-red hover:bg-temple-dark text-white font-medium px-4 py-2 rounded-xl text-sm transition shadow-sm hover:shadow-md"
|
|
data-modal="documentUploadModal">
|
|
<i data-lucide="upload-cloud" class="w-4 h-4"></i>
|
|
{% trans "Upload Document" %}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Documents List -->
|
|
<div class="p-4" id="document-list-container">
|
|
{% if documents %}
|
|
<div class="space-y-2">
|
|
{% for document in documents %}
|
|
<div id="document-{{document.pk}}" class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-3 bg-gray-50 rounded-xl hover:bg-gray-100 transition">
|
|
<div class="flex items-start gap-3 flex-1">
|
|
<div class="flex-shrink-0 mt-0.5">
|
|
<i data-lucide="file" class="w-8 h-8 text-temple-red"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="font-semibold text-gray-900 mb-1">{{ document.get_document_type_display }}</p>
|
|
<p class="text-xs text-gray-500 mb-1 truncate">{{ document.file.name|filename }}</p>
|
|
{% if document.description %}
|
|
<p class="text-xs text-gray-600 mb-1">{{ document.description }}</p>
|
|
{% endif %}
|
|
<p class="text-xs text-gray-500">
|
|
{% trans "Uploaded by" %} <span class="font-medium">{{ document.uploaded_by.get_full_name|default:document.uploaded_by.username }}</span>
|
|
{% trans "on" %} {{ document.created_at|date:"M d, Y" }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
<a href="{% url 'document_download' document.id %}"
|
|
class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white border border-gray-200 text-gray-600 hover:text-temple-red hover:border-temple-red transition"
|
|
title='{% trans "Download" %}'>
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
</a>
|
|
|
|
{% if user.is_superuser or application.job.assigned_to == user %}
|
|
<a hx-post="{% url 'document_delete' document.pk %}"
|
|
hx-confirm='{% trans "Are you sure you want to delete this document?" %}'
|
|
hx-target="#document-{{document.pk}}"
|
|
hx-swap="delete"
|
|
class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white border border-gray-200 text-gray-600 hover:text-red-600 hover:border-red-600 transition"
|
|
title='{% trans "Delete" %}'>
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-8">
|
|
<i data-lucide="folder-open" class="w-12 h-12 text-gray-300 mx-auto mb-3"></i>
|
|
<p class="text-gray-600 font-medium mb-1">{% trans "No documents uploaded yet." %}</p>
|
|
<p class="text-sm text-gray-500">{% trans "Click \"Upload Document\" to add files for this application." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Upload Modal (moved outside the card structure to avoid z-index issues) -->
|
|
<div id="documentUploadModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60] hidden flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-2xl shadow-xl max-w-lg w-full">
|
|
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
|
<h5 class="text-lg font-bold text-gray-900">{% trans "Upload Document" %}</h5>
|
|
<button type="button"
|
|
class="modal-close-btn text-gray-400 hover:text-gray-600 transition"
|
|
data-modal="documentUploadModal">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-4">
|
|
{% include "forms/document_form.html" with slug=application.slug %}
|
|
</div>
|
|
</div>
|
|
</div>
|