{% extends "base.html" %}

{% block title %}Hasil Prediksi{% endblock %}

{% block content %}
<div class="jumbotron m-3">
    <h1 class="display-4">Hasil Prediksi Gambar Tomat</h1>
    <p class="lead">Berikut adalah hasil analisis dari gambar yang telah Anda unggah:</p>
    <hr class="my-4">

    {% if img_path %}
    <div class="col-12 col-md-8 mx-auto">
        <h3 class="text-center">Detail Prediksi</h3>
        <div class="container-fluid text-center">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th style="vertical-align: middle; background-color: azure;">
                                <h5>Gambar</h5>
                            </th>
                            <th style="vertical-align: middle; background-color: azure;">
                                <h5>Tanggal</h5>
                            </th>
                            <th style="vertical-align: middle; background-color: azure;">
                                <h5>Waktu</h5>
                            </th>
                            <th style="vertical-align: middle; background-color: azure;">
                                <h5>Prediksi</h5>
                            </th>
                            <th style="vertical-align: middle; background-color: azure;">
                                <h5>Tingkat Akurasi</h5>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <img src="{{ url_for('static', filename='uploads/' + img_path) }}" 
                                     alt="Uploaded Image" 
                                     class="img-fluid rounded"
                                     style="max-width: 100%; height: auto;">
                            </td>
                            <td style="vertical-align: middle;">{{ data_date }}</td>
                            <td style="vertical-align: middle;">{{ data_time }}</td>
                            <td style="vertical-align: middle;">{{ predicted_class }}</td>
                            <td style="vertical-align: middle;">{{ confidence }}%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="text-center mt-4">
        <a href="/upload" class="btn btn-primary">Unggah Gambar Baru</a>
    </div>
    {% else %}
    <div class="alert alert-warning" role="alert">
        Tidak ada hasil untuk ditampilkan. Silakan unggah gambar terlebih dahulu.
    </div>
    {% endif %}
</div>
{% endblock %}