app/templates/report_detail.html

{% extends "base_layout.html" %}

{% block title %}Report Details - InterroGen{% endblock %}

{% block head_extra %}
<style>
    .json-display {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        padding: 15px;
        border-radius: 5px;
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 600px; /* Increased height */
        overflow-y: auto;
    }
    .report-summary-pre {
        background-color: #f8f9fa;
        border: 1px solid #eee;
        padding: 10px;
        border-radius: 4px;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
</style>
{% endblock %}

{% block page_content %}
<div class="heading-container">
    <h1 class="h3">Report Details for Case: <a href="{{ url_for('view_case', case_id=report.case.id) }}">{{ report.case.case_id_display }}</a></h1>
    <div>
        <a href="{{ url_for('view_case', case_id=report.case.id) }}" class="btn btn-outline-secondary me-2"><i class="bi bi-arrow-left-circle me-1"></i>Back to Case</a>
        <a href="{{ url_for('reports_list_page') }}" class="btn btn-outline-secondary"><i class="bi bi-list-task me-1"></i>All Reports</a>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header">
        <i class="bi bi-clipboard-data me-2"></i>Report Information
    </div>
    <div class="card-body">
        <dl class="row">
            <dt class="col-sm-3">Report ID:</dt>
            <dd class="col-sm-9">{{ report.id }}</dd>

            <dt class="col-sm-3">Generated At:</dt>
            <dd class="col-sm-9">{{ report.generated_at.strftime('%Y-%m-%d %H:%M:%S') }}</dd>

            <dt class="col-sm-3">Country Context:</dt>
            <dd class="col-sm-9">{{ report.report_country_context.name if report.report_country_context else 'N/A' }}</dd>
        </dl>
        <hr>
        <h6>Brief Summary (from LLM via DB):</h6>
        <div class="report-summary-pre">{{ report.report_content_summary if report.report_content_summary else 'No summary available.' }}</div>
        
        <h6 class="mt-3">Recommendations (from LLM via DB):</h6>
        <div class="report-summary-pre">{{ report.recommendations if report.recommendations else 'No recommendations available.' }}</div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header">
        <i class="bi bi-braces me-2"></i>Full LLM Generated Report (Raw JSON Output)
    </div>
    <div class="card-body">
        <p class="text-muted small">This is the raw JSON data received from the language model. The application attempts to parse this for structured display and for populating the summary and recommendations above.</p>
        <div class="json-display">
            {% if report_data and not report_data.error %}
                {{ report_data | tojson(indent=2) }}
            {% elif report_data and report_data.error %}
                <div class="alert alert-warning">Error parsing report data: {{ report_data.error }}</div>
                <pre>{{ report_data.raw }}</pre>
            {% else %}
                <pre>{{ report.llm_json_output }}</pre>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    // Add any report detail specific JS here if needed
    console.log("Report detail page loaded for report ID: {{ report.id }}");
</script>
{% endblock %}