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

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

{% block extra_css %}
<style>
    .markdown-body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        line-height: 1.6;
        color: #24292e;
    }
    .markdown-body h1 {
        font-size: 2em;
        border-bottom: 1px solid #eaecef;
        padding-bottom: 0.3em;
        margin-bottom: 1em;
    }
    .markdown-body h2 {
        font-size: 1.5em;
        border-bottom: 1px solid #eaecef;
        padding-bottom: 0.3em;
        margin-top: 1.5em;
        margin-bottom: 1em;
    }
    .markdown-body h3 {
        font-size: 1.25em;
        margin-top: 1.5em;
        margin-bottom: 1em;
    }
    .markdown-body p {
        margin-bottom: 1em;
    }
    .markdown-body ul, .markdown-body ol {
        padding-left: 2em;
        margin-bottom: 1em;
    }
    .markdown-body li {
        margin-bottom: 0.25em;
    }
    .markdown-body code {
        background-color: rgba(27, 31, 35, 0.05);
        padding: 0.2em 0.4em;
        border-radius: 3px;
        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        font-size: 85%;
    }
    .markdown-body pre {
        background-color: #f6f8fa;
        padding: 16px;
        border-radius: 6px;
        overflow-x: auto;
        margin-bottom: 1em;
    }
    .markdown-body pre code {
        background-color: transparent;
        padding: 0;
    }
    .markdown-body blockquote {
        border-left: 4px solid #dfe2e5;
        padding-left: 1em;
        margin-left: 0;
        color: #6a737d;
    }
    .markdown-body table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 1em;
    }
    .markdown-body th, .markdown-body td {
        border: 1px solid #dfe2e5;
        padding: 6px 13px;
        text-align: left;
    }
    .markdown-body th {
        background-color: #f6f8fa;
        font-weight: 600;
    }
    .markdown-body tr:nth-child(2n) {
        background-color: #f6f8fa;
    }
    .markdown-body a {
        color: #0366d6;
        text-decoration: none;
    }
    .markdown-body a:hover {
        text-decoration: underline;
    }
    .markdown-body hr {
        height: 0.25em;
        padding: 0;
        margin: 24px 0;
        background-color: #e1e4e8;
        border: 0;
    }
</style>
{% 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-warning text-dark">MARKDOWN</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 Raw" %}
            </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-header bg-white border-0">
            <h5 class="mb-0">{% trans "Report Content" %}</h5>
        </div>
        <div class="card-body">
            <div class="markdown-body">
                <pre style="white-space: pre-wrap; word-wrap: break-word; font-family: inherit;"><code style="background: none; padding: 0;">{{ content }}</code></pre>
            </div>
        </div>
    </div>
</div>
{% endblock %}