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

<header>
    <div class="container">
        <h1>Jobs Overview</h1>
        <p>Report generated on: {{ generation_date }}</p>
    </div>
</header>

<div class="container">
<main>
        <section>
            <h2>{{ jobs|length }} Jobs</h2>
            <table class="results-table" id="jobs-table">
                <thead>
                    <tr>
                        <th class="sortable asc">Job #<span class="sort-indicator"></span></th>
                        <th class="sortable">Job ID<span class="sort-indicator"></span></th>
                        <th class="sortable">Query Structure<span class="sort-indicator"></span></th>
                        <th class="sortable">Number of Routes<span class="sort-indicator"></span></th>
                        <th></th> <!-- Header for view link column -->
                    </tr>
                </thead>
                <tbody>
                    {% for job in jobs %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ job.job_id }}</td>
                        <td>
                            {{ job.query_svg|safe }}
                        </td>
                        <td>{{ job.routes|length }}</td>
                        <td><a href="./job_{{ job.job_id }}/index.html" class="view-button">View Job</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
                </table>
        </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/table_sorter.js"></script>

</body>
</html>
