{% 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" %}
            </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="row">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-0">
                    <h5 class="mb-0">{% trans "Report Information" %}</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <th class="col-4">{% trans "Filename" %}:</th>
                            <td><strong>{{ filename }}</strong></td>
                        </tr>
                        <tr>
                            <th>{% trans "Format" %}:</th>
                            <td>
                                {% if report_type == 'json' %}
                                    <span class="badge bg-info">JSON</span>
                                {% elif report_type == 'markdown' %}
                                    <span class="badge bg-warning text-dark">Markdown</span>
                                {% else %}
                                    <span class="badge bg-secondary">{{ report_type|title }}</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>{% trans "Size" %}:</th>
                            <td>{{ size_human }}</td>
                        </tr>
                        <tr>
                            <th>{% trans "Created" %}:</th>
                            <td>{{ created_date|date:"Y-m-d H:i:s" }}</td>
                        </tr>
                        <tr>
                            <th>{% trans "Last Modified" %}:</th>
                            <td>{{ modified_date|date:"Y-m-d H:i:s" }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-0">
                    <h5 class="mb-0">{% trans "File Format Details" %}</h5>
                </div>
                <div class="card-body">
                    {% if report_type == 'json' %}
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>JSON Format</strong>
                            <p class="mb-0 mt-2">
                                Structured data format suitable for programmatic access and API integration. 
                                Can be imported into data analysis tools or custom applications.
                            </p>
                        </div>
                        <h6>Recommended Viewers:</h6>
                        <ul class="list-unstyled">
                            <li><i class="bi bi-check2 text-success me-2"></i>Any text editor</li>
                            <li><i class="bi bi-check2 text-success me-2"></i>JSON formatters/validators</li>
                            <li><i class="bi bi-check2 text-success me-2"></i>Data analysis tools</li>
                        </ul>
                    {% elif report_type == 'markdown' %}
                        <div class="alert alert-warning">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>Markdown Format</strong>
                            <p class="mb-0 mt-2">
                                Plain text formatting syntax. Lightweight and readable, perfect for documentation 
                                and version control systems.
                            </p>
                        </div>
                        <h6>Recommended Viewers:</h6>
                        <ul class="list-unstyled">
                            <li><i class="bi bi-check2 text-success me-2"></i>Any text editor</li>
                            <li><i class="bi bi-check2 text-success me-2"></i>Markdown previewers</li>
                            <li><i class="bi bi-check2 text-success me-2"></i>GitHub/GitLab renderers</li>
                        </ul>
                    {% else %}
                        <div class="alert alert-secondary">
                            <i class="bi bi-question-circle me-2"></i>
                            <strong>Unknown Format</strong>
                            <p class="mb-0 mt-2">
                                This report format is not recognized. Please download the file to view its contents.
                            </p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0">
            <h5 class="mb-0">{% trans "Actions" %}</h5>
        </div>
        <div class="card-body">
            <div class="d-flex gap-2">
                <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 Report" %}
                </a>
                <a href="{% url 'surveys:analytics_report_download' filename %}" class="btn btn-primary">
                    <i class="bi bi-download me-2"></i>{% trans "Download Report" %}
                </a>
                <a href="{% url 'surveys:analytics_reports' %}" class="btn btn-outline-secondary">
                    <i class="bi bi-list me-2"></i>{% trans "View All Reports" %}
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}