{% 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 %}