{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{{ filename }} - {% trans "Survey Analytics Report" %} - PX360{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{{ filename }}</h1>
            <p class="text-muted mb-0">
                {% trans "Type" %}: <span class="badge bg-{{ report_type|lower }}">{{ report_type|upper }}</span> |
                {% trans "Size" %}: {{ size_human }} |
                {% trans "Created" %}: {{ created_date|date:"Y-m-d H:i:s" }}
            </p>
        </div>
        <div>
            <a href="{% url 'surveys:analytics_report_view_inline' filename %}" class="btn btn-success" target="_blank">
                <i class="bi bi-eye me-2"></i>{% trans "View Full Screen" %}
            </a>
            <a href="{% url 'surveys:analytics_report_download' filename %}" class="btn btn-primary">
                <i class="bi bi-download me-2"></i>{% trans "Download" %}
            </a>
            <a href="{% url 'surveys:analytics_reports' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-2"></i>{% trans "Back to Reports" %}
            </a>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <iframe srcdoc="{{ content|safe }}" 
                    style="width: 100%; min-height: 80vh; border: none;"
                    sandbox="allow-same-origin"></iframe>
        </div>
    </div>
</div>
{% endblock %}