{% extends 'layout.html' %}

{% block body %}
    <div class="container">
        <br><br>
        <form action="#" method="POST" enctype="multipart/form-data">
            <div class="input-group">
                <input type="file" class="form-control" name="image_name" required>
                <input type="submit" value="Upload" class="btn btn-outline-secondary">
            </div>
        </form>
    </div>

    {% if upload %}
        <div class="container">
            <br><br>
            <table style="margin-bottom: 20px;"> <!-- Added margin-bottom for spacing -->
                <tr style="border: solid black;">
                    <th style="font-size: 20px;">Original Image</th>
                    <th style="font-size: 20px;">Corresponding bounding box Image</th>
                </tr>
                <tr>
                    <td>
                        <img class="rounded float-left img-fluid" src="/static/upload/{{ upload_image }}" alt="">
                    </td>
                    <td>
                        <img class="rounded float-right img-fluid" src="/static/predict/{{ upload_image }}" alt="">
                    </td>
                </tr>
            </table>

            <table style="border: solid black; width: 100%;">
                <tr style="border: solid black; text-align: center;">
                    <th style="font-size: 26px;">Number Plate of the Car</th>
                </tr>
                <tr style="border: solid black;">
                    <td>
                        <img class="img-fluid" src="/static/roi/{{ upload_image }}" alt="">
                    </td>
                    <td style="background-color: yellow;">
                        <h1 class="display-2"> {{ text }}</h1>
                    </td>
                </tr>
            </table>
        </div>
    {% endif %}

{% endblock  %}