{% load i18n %} {% load horillafilters %} {% load static %}
<div class="d-flex justify-content-end">
	<div class="oh-btn-group mb-4">
		{% if document.file %}
		<a
			href="data:{{ content_type }};base64,{{ file_content|base64_encode }}"
			class="oh-btn oh-btn--info w-100"
			download="{{document.file}}"
			title="{% trans 'Download' %}"
			><ion-icon class="me-1" name="download-outline"></ion-icon
		></a>
		{% endif %}
	</div>
</div>
{% if document.file %}
	<div class="modal-body">
		<!-- 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>
{% 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 %}
