{% extends 'base.html' %}

{% block title %}Eagle Eye - Pre-Process Results{% endblock %}

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

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

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

    {% for index, result in results.items() %}
        <div
                id="results-viewport-{{ index }}"
                {% if index == 0 %}
                    style="display: block;"
                {% else %}
                    style="display: none;"
                {% endif %}
        >
            <div>
                <h4>Test and Reference Image</h4>
                <img src="/job-file/{{ job_id }}/{{ index }}/{{ result.test_image_path.name }}" class="image-box">
                <img src="/job-reference-image/{{ job_id }}" class="image-box">
            </div>

            <br>

            <div>
                <h4>Matched Image</h4>
                <img src="/job-file/{{ job_id }}/{{ index }}/{{ result.matched_features_image_path.name }}" class="image-box">
            </div>

            <br>

            <div>
                <h4>Aligned Image</h4>
                <img src="/job-file/{{ job_id }}/{{ index }}/{{ result.aligned_image_path.name }}" class="image-box">
            </div>

            <br>

            <div>
                <h4>Overlaid Image</h4>
                <img src="/job-file/{{ job_id }}/{{ index }}/{{ result.overlaid_image_path.name }}" class="image-box">
            </div>
        </div>
    {% endfor %}
{% endblock %}
