72 lines
3.6 KiB
HTML
72 lines
3.6 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{{ filename }} - {% trans "Survey Analytics Report" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2 flex items-center gap-2">
|
|
<i data-lucide="file-bar-chart" class="w-8 h-8 text-navy"></i>
|
|
{{ filename }}
|
|
</h2>
|
|
<div class="flex flex-wrap gap-4 text-sm text-gray-500">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="file-type" class="w-4 h-4"></i>
|
|
<span>{% trans "Type" %}:</span>
|
|
{% if report_type == 'json' %}
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-cyan-100 text-cyan-700">JSON</span>
|
|
{% elif report_type == 'html' %}
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">HTML</span>
|
|
{% elif report_type == 'markdown' %}
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">Markdown</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{{ report_type|upper }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="hard-drive" class="w-4 h-4"></i>
|
|
<span>{% trans "Size" %}: {{ size_human }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="calendar" class="w-4 h-4"></i>
|
|
<span>{% trans "Created" %}: {{ created_date|date:"M d, Y H:i" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-3">
|
|
<a href="{% url 'surveys:analytics_report_view_inline' filename %}"
|
|
class="bg-emerald-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-emerald-600 transition flex items-center gap-2"
|
|
target="_blank">
|
|
<i data-lucide="maximize" class="w-5 h-5"></i> {% trans "View Full Screen" %}
|
|
</a>
|
|
<a href="{% url 'surveys:analytics_report_download' filename %}"
|
|
class="bg-blue-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-600 transition flex items-center gap-2">
|
|
<i data-lucide="download" class="w-5 h-5"></i> {% trans "Download" %}
|
|
</a>
|
|
<a href="{% url 'surveys:analytics_reports' %}"
|
|
class="border-2 border-gray-200 text-gray-700 px-6 py-3 rounded-xl font-semibold hover:bg-gray-50 transition flex items-center gap-2">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i> {% trans "Back to Reports" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Content -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
|
|
<div class="p-6">
|
|
<iframe srcdoc="{{ content|safe }}"
|
|
style="width: 100%; min-height: 80vh; border: none;"
|
|
sandbox="allow-same-origin"
|
|
class="rounded-xl"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |