{% extends "base.html" %}

{% block content %}
<div class="table-container">
    <h2>Ihre Aufträge</h2>
    <table id="jobs-table">
        <thead>
            <tr>
                <th>Dateiname</th>
                <th>Status</th>
                <th>Erstellt am</th>
                <th>Ergebnis</th>
                <th>Aktionen</th>
            </tr>
        </thead>
        <tbody>
            {% for job in jobs %}
            <tr>
                <td>{{ job.filename }}</td>
                <td class="job-status">{{ job.status }}</td>
                <td>{{ job.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                <td>
                    {% if job.status == "Completed" %}
                        <a href="{{ url_for('auth.download_result', job_id=job.id) }}">Download</a>
                    {% else %}
                        Noch nicht verfügbar
                    {% endif %}
                </td>
                <td>
                    <form action="{{ url_for('auth.delete_job', job_id=job.id) }}" method="POST" style="display:inline;">
                        <button type="submit" class="delete-btn">Löschen</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
    // Periodische Aktualisierung des Jobstatus
    setInterval(function() {
        fetch('{{ url_for("auth.job_status") }}')
            .then(response => response.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const newRows = doc.querySelectorAll('#jobs-table tbody tr');
                const currentRows = document.querySelectorAll('#jobs-table tbody tr');

                newRows.forEach((newRow, index) => {
                    const newStatus = newRow.querySelector('.job-status').textContent;
                    currentRows[index].querySelector('.job-status').textContent = newStatus;

                    const newResult = newRow.querySelector('td:nth-child(4)').innerHTML;
                    currentRows[index].querySelector('td:nth-child(4)').innerHTML = newResult;
                });
            });
    }, 5000); // Aktualisierung alle 5 Sekunden
</script>
{% endblock %}