{% extends "base.html" %}
{% block content %}

<div class="container mt-4">

    <h2 class="mb-4">Report #{{ report.id }}</h2>

    <!-- USER NOTE -->
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">User Note / Description</h5>
            <p class="card-text">
                {{ report.note or "No description provided." }}
            </p>
        </div>
    </div>

    <!-- IMAGES -->
    <h4>Attached Images</h4>

    {% if images %}
        <div class="row mt-3">
            {% for img in images %}
                <div class="col-md-3 mb-3">
                    <img
                        src="{{ url_for('static', filename='uploads/' ~ img.filename) }}"
                        class="img-fluid rounded shadow"
                        alt="Report image">
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="text-muted">No images uploaded for this report.</p>
    {% endif %}

    <!-- ACTIONS -->
    <div class="mt-4 d-flex gap-3">
        <a href="{{ url_for('reports.pdf', report_id=report.id) }}"
           class="btn btn-primary">
            Download PDF
        </a>

        <a href="{{ url_for('reports.index') }}"
           class="btn btn-secondary">
            Back to Reports
        </a>
    </div>

</div>

{% endblock %}