<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Results Overview for {{ job.job_id }}</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>

<header>
    <div class="container">
        <h1>Results for Job {{ job.job_id }}</h1>
        <p>Job submitted on <span id="submission-date">{{ job.submission_date }}</span></p>
    </div>
</header>

<div class="container">
    {% if total_jobs > 1 %}
    <nav class="navigation">
        <a href="../index.html" class="back-link">&larr; Back to Jobs Overview</a>
        <div class="nav-links">
            <a href="../job_{{ prev_job_id }}/index.html" class="nav-button {% if not prev_job_id %}disabled{% endif %}">&larr; Previous Job</a>
            <span>Job {{ job_index + 1 }} of {{ total_jobs }}</span>
            <a href="../job_{{ next_job_id }}/index.html" class="nav-button {% if not next_job_id %}disabled{% endif %}">Next Job &rarr;</a>
        </div>
    </nav>
    {% endif %}

    <main>
        <!-- Query Structure Section -->
        <section>
            <h2>Query Structure</h2>
            <div class="query-structure-container">
                <div class="structure-placeholder">
                    {# Use the 'safe' filter to render SVG content without escaping it #}
                    {{ job.query_svg | safe }}
                </div>
                <div class="smiles-container">
                    <label for="smiles" class="sr-only">SMILES String</label>
                    <input type="text" id="smiles" name="smiles" readonly
                           value="{{ job.query_smiles }}">
                </div>
            </div>
        </section>

        <!-- Job Parameters Section -->
        <section>
            <h2>Job Parameters</h2>
            <div class="metadata-grid">
                <!-- Left Column -->
                    <dl class="space-y-3">
                        <div class="flex-between">
                        <dt>Engine:</dt>
                        <dd>{{ job.engine }}</dd>
                        </div>
                        <div class="flex-between">
                        <dt>Processing Time:</dt>
                        <dd>{{ job.processing_time }}</dd>
                        </div>
                        <div class="flex-between">
                        <dt>Max number of routes:</dt>
                        <dd>{{ job.maximum_no_of_routes }}</dd>
                        </div>
                         <div class="flex-between">
                        <dt>Building block limit:</dt>
                        <dd>{{ job.building_block_limit }}</dd>
                        </div>
                        <div class="flex-between">
                        <dt>Reaction limit:</dt>
                            <dd>{{ job.reaction_limit }}</dd>
                        </div>
                </dl>
                <!-- Right Column -->
                <dl class="space-y-3">
                         <div class="flex-between">
                        <dt>Building Block Libraries:</dt>
                        <dd>
                            {% for library in job.building_block_libraries %}
                                {{ library }}{% if not loop.last %}<br>{% endif %}
                            {% endfor %}
                        </dd>
                        </div>
                    </dl>
                </div>
        </section>

        <!-- Results Table Section -->
        <section>
            <h2>Resulting Routes</h2>
            <div class="overflow-x-auto">
                <table id="routes-table">
                    <thead>
                        <tr>
                        <th class="sortable asc" data-column="0">Route #<span class="sort-indicator"></span></th>
                        <th class="sortable" data-column="1">Number of Steps<span class="sort-indicator"></span></th>
                        <th class="sortable" data-column="2">Number of Building Blocks<span class="sort-indicator"></span></th>
                        <th class="relative">
                            <span class="sr-only">View Route</span>
                        </th>
                        </tr>
                    </thead>
                    <tbody>
                    {# Loop through each route and create a table row #}
                        {% for route in job.routes %}
                        <tr>
                        <td>{{ loop.index }}</td>
                            <td>{{ route.num_steps }}</td>
                            <td>{{ route.num_building_blocks }}</td>
                        <td class="text-right">
                            <a href="./route_{{ loop.index }}.html">View Details &rarr;</a>
                    </tr>
                    {% else %}
                    {# This block is shown if job.routes is empty #}
                    <tr>
                        <td colspan="4" class="text-center" style="padding: 2rem;">No routes were found for the given query.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </main>

    <footer>
        <p>Results are generated by Pending AI's Retrosynthesis Engine powered by artificial intelligence, an experimental technology that may occasionally be misleading or incorrect.</p>
    </footer>
</div>

<script src="../scripts/date_formatter.js"></script>
<script src="../scripts/table_sorter.js"></script>

</body>
</html>
