{% load i18n %} {% load horillafilters %} {% load static %}
{% include 'generic/components.html' %}
<div class="d-flex justify-content-end">
	<div class="oh-btn-group mb-4">
		<a
			type="submit"
			hx-get="{% url 'file-upload' document.id %}"
			hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle"
			data-target="#objectCreateModal"
			title="Upload file"
			class="oh-btn oh-btn--warning w-100"
		>
			<ion-icon name="attach-outline"></ion-icon>
		</a>
		{% if document.document %}
		{% if perms.horilla_document.change_documentrequest %}
			{% if document.status == "approved" %}
				<a class="oh-btn oh-btn--success w-100 oh-btn--disabled" title="{% trans 'Approved' %}">
					<ion-icon class="me-1" name="checkmark-outline"></ion-icon>
				</a>
			{% else %}
				<a
					type="submit"
					hx-get="{% url 'document-approve' document.id %}"
					hx-target="#viewFile"
					title="{% trans 'Approve' %}"
					class="oh-btn oh-btn--success w-100"
				>
					<ion-icon class="me-1" name="checkmark-outline"></ion-icon>
				</a>
			{% endif %}
			{% if document.status == "rejected" %}
				<a class="oh-btn oh-btn--danger w-100 oh-btn--disabled" title="{% trans 'Rejected' %}">
					<ion-icon class="me-1" name="close-circle-outline"></ion-icon>
				</a>
			{% else %}
				<a
					type="submit"
					hx-get="{% url 'document-reject' document.id %}"
					hx-target="#objectCreateModalTarget"
					data-target="#objectCreateModal"
					data-toggle="oh-modal-toggle"
					title="{% trans 'Reject' %}"
					class="oh-btn oh-btn--danger w-100"
				>
					<ion-icon class="me-1" name="close-circle-outline"></ion-icon>
				</a>
			{% endif %}
		{% endif %}
		<a
			href="data:{{ content_type }};base64,{{ file_content|base64_encode }}"
			class="oh-btn oh-btn--info w-100"
			download="{{document.title}}"
			title="{% trans 'Download' %}"
			><ion-icon class="me-1" name="download-outline"></ion-icon
		></a>
		{% endif %}
	</div>
</div>
{% if document.document %}
	<div class="modal-body" {% if document.status == "rejected" %} style="border: 5px solid red;"{% endif %}>
		<!-- Display the file content based on the file type -->
		{% if file_extension == 'pdf' or file_extension == 'txt' or file_extension == 'docx' or file_extension == 'xlsx' %}
		<embed
			src="data:{{ content_type }};base64,{{ file_content|base64_encode }}"
			type="{{ content_type }}"
			width="100%"
			height="500px"
		/>
		{% elif file_extension == 'jpg' or file_extension == 'jpeg' or file_extension == 'png' or file_extension == 'webp' %}
		<div class="container">
			<img
				src="data:{{ content_type }};base64,{{ file_content|base64_encode }}"
				alt="File Preview"
				class="img-fluid"
				style="display: block; width: 100%;height: 500px;"
			/>
		</div>
		{% else %}
		<p>{% trans "File format not supported for preview." %}</p>
		{% endif %}
	</div>
	{% if document.status == 'rejected' %}
	<h2 class="oh-label"> <b>{% trans "Reject Reason: " %}</b></h2>
	<p class="ms-4">{{document.reject_reason}}</p>
	{% endif %}
{% else %}
<div class="oh-not-found">
	<img
		style="width: 150px; height: 150px;"
		src="{% static 'images/ui/document.png' %}"
		class="oh-404__image mb-4"
		alt="Page not found. 404."
	/>
	<h3 class="oh-404__subtitle">
		{% trans "No Document to view." %}
	</h3>
</div>
{% endif %}