{% extends 'base.html' %}

{% block title %}Eagle Eye - Job Results{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/static/css/job_results.css">
    <script src="/static/js/job_results.js" defer></script>
    <script>
        var CURRENT_INDEX = 0;
        var IMAGE_COUNT = {{ image_count }};
    </script>
{% endblock %}

{% block content %}
    <h2>Job: {{ job_name }}</h2>

    <div id="display-type-selection">
        <h3 style="margin: 0; padding-left: 10px;">Image Display Format:</h3>
        <input type="radio" name="image-display-format" id="field-snippets" value="field-snippets" checked>
        <label for="field-snippets">Field Snippets</label>
        <input type="radio" name="image-display-format" id="whole-form" value="whole-form">
        <label for="whole-form">Whole Form</label>
    </div>

    <br>

    <div style="display: flex; margin-bottom: 5px;">
        <button onclick="updateViewport(false, null)">Previous</button>
        <button onclick="updateViewport(true, null)">Next</button>
        <h3 style="margin: 0; padding-left: 10px;">Image: </h3>
        <h3 id="image_id" style="margin: 0; padding-left:5px;">1 (1/{{ image_count }})</h3>
    </div>

    {% for image_index, region_results in results.items() %}
        <div id="results-viewport-{{ image_index }}"  style="display: none; min-width: 1600px;">
            <form
                    id="job-results-corrections"
                    action="/job-status/{{ job_id }}/{{ image_index }}/update"
                    method="post"
                    enctype="multipart/form-data"
                    style="width: fit-content;"
            >
                {% for page_region, results in region_results.items() %}
                    <h3>Page Region: {{ page_region.capitalize() }}</h3>

                    <table class="image-table">
                        <tr>
                            <th>Data Field</th>
                            <th>Validation</th>
                            <th>Extracted Text</th>
                            <th class="roi-cell">ROI Image</th>
                        </tr>
                            {% for result in results %}
                                <tr class="form-field-row">
                                    <td class="field-name-cell">{{ result.name }}</td>
                                    <td class="validation-cell">{{ result.get_validation_image_html() | safe }}</td>
                                    <td class="correction-cell">{{ result.get_html_input() | safe }}</td>
                                    <td class="roi-cell">
                                        <img
                                                src="/job-file/{{ job_id }}/{{ image_index }}/{{ page_region }}/{{ result.roi_image_path.name }}"
                                        />
                                    </td>
                                </tr>
                            {% endfor %}
                    </table>

                    <br>
                {% endfor %}

                <input type="submit" value="Submit" style="margin-bottom: 10px;"/>
            </form>

            <img src="/job-test-image/{{ job_id }}/{{ image_index }}" class="whole-form-image">
        </div>
    {% endfor %}
{% endblock %}
