Complete PDF Sort and Merge Flask Application

- Full-featured web application for PDF processing
- Microsoft Entra (Azure AD) authentication with PKCE
- Parallel PDF sorting and merging capabilities
- Job management system with real-time progress tracking
- Modern web UI with responsive design
- Comprehensive error handling and logging
- Ubuntu installation script for easy deployment
- Environment configuration for secure credential management
This commit is contained in:
nmemmert committed 2025-11-05 11:41:48 -05:00
1 parent 31c2d27a62
commit 144adf64c4
18 files changed
+2903 -2

No files matched your search

+312
View File
@@ -0,0 +1,312 @@
<!DOCTYPE html>
<html>
<head>
<title>End of Year Statements</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.logo {
max-width: 200px;
height: auto;
}
.upload-section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.radio-group {
margin-bottom: 15px;
}
.radio-group label {
margin-right: 20px;
}
input[type="file"] {
margin: 10px 0;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.progress-section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
display: none;
}
progress {
width: 100%;
height: 20px;
}
.result-section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
display: none;
}
.error {
color: red;
}
#logArea {
margin-top: 20px;
padding: 10px;
background: #f9f9f9;
border: 1px solid #ddd;
max-height: 300px;
overflow-y: auto;
font-family: monospace;
font-size: 12px;
white-space: pre-line;
}
.clear-btn {
background-color: #6c757d;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-left: 10px;
}
.clear-btn:hover {
background-color: #5a6268;
}
.clear-progress {
margin-top: 10px;
display: none;
}
.clear-progress progress {
width: 100%;
height: 20px;
}
.nav-links {
text-align: center;
margin-bottom: 20px;
}
.nav-links a {
color: #007bff;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
.nav-links a:hover {
text-decoration: underline;
}
.auth-section {
margin-top: 20px;
text-align: center;
}
.user-info {
display: inline-block;
background: white;
padding: 10px 20px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.user-info span {
margin-right: 15px;
font-weight: bold;
}
.logout-btn, .login-btn {
background-color: #dc3545;
color: white;
padding: 6px 12px;
border: none;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
display: inline-block;
}
.login-btn {
background-color: #28a745;
}
.logout-btn:hover, .login-btn:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="header">
<img src="{{ url_for('static', filename='trbc-logo-full.png') }}" alt="Logo" class="logo">
<h1>End of Year Statements Processor</h1>
<p>Upload PDF files or folders to automatically sort by address and merge by page count</p>
<!-- Authentication section -->
<div class="auth-section">
{% if session.oauth_token %}
<div class="user-info">
<span>Welcome, {{ session.user_info.displayName or session.user_info.givenName or 'User' }}!</span>
<a href="{{ url_for('logout') }}" class="logout-btn">Logout</a>
</div>
{% else %}
<div class="login-prompt">
<a href="{{ url_for('login') }}" class="login-btn">Login with Microsoft</a>
</div>
{% endif %}
</div>
</div>
<div class="nav-links">
<a href="{{ url_for('results') }}">View All Jobs & Downloads</a>
</div>
<div class="upload-section">
<div class="radio-group">
<label>
<input type="radio" name="uploadType" value="files" checked> Upload Files (PDFs or ZIPs)
</label>
<label>
<input type="radio" name="uploadType" value="folder"> Upload Folder
</label>
</div>
<form id="uploadForm" enctype="multipart/form-data">
<div id="filesInput">
<input type="file" name="files" multiple accept=".pdf,.zip" id="fileInput">
</div>
<div id="folderInput" style="display:none;">
<input type="file" webkitdirectory multiple id="folderFileInput">
</div>
<button type="submit" id="submitBtn">Process Files</button>
<button type="button" id="clearBtn" class="clear-btn">Clear/Reset</button>
</form>
<div class="clear-progress" id="clearProgressContainer">
<p>Clearing temporary files...</p>
<progress id="clearProgress" value="0" max="100"></progress>
</div>
</div>
<div class="nav-links">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="error">
{% for message in messages %}
<p>{{ message }}</p>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<script>
document.querySelectorAll('input[name="uploadType"]').forEach(radio => {
radio.addEventListener('change', function() {
document.getElementById('filesInput').style.display = this.value === 'files' ? 'block' : 'none';
document.getElementById('folderInput').style.display = this.value === 'folder' ? 'block' : 'none';
});
});
document.getElementById('uploadForm').addEventListener('submit', function(e) {
e.preventDefault();
alert("Starting upload and processing... This may take several minutes for large files.");
const formData = new FormData();
const uploadType = document.querySelector('input[name="uploadType"]:checked').value;
const inputElement = uploadType === 'files' ? document.getElementById('fileInput') : document.getElementById('folderFileInput');
for (let file of inputElement.files) {
formData.append('files', file);
}
const xhr = new XMLHttpRequest();
document.getElementById('submitBtn').disabled = true;
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
const percentComplete = (e.loaded / e.total) * 100;
document.getElementById('status').textContent = `Uploading... ${Math.round(percentComplete)}%`;
}
});
xhr.addEventListener('load', function() {
if (xhr.status === 200) {
// Redirect to job status page
window.location.href = xhr.responseURL || '/';
} else {
document.getElementById('status').textContent = 'Error: ' + xhr.status + ' ' + xhr.statusText;
document.getElementById('submitBtn').disabled = false;
}
});
xhr.addEventListener('error', function() {
document.getElementById('status').textContent = 'Upload failed';
document.getElementById('submitBtn').disabled = false;
});
xhr.open('POST', '/');
xhr.send(formData);
});
</script>
<script>
// Clear/Reset functionality
document.getElementById('clearBtn').addEventListener('click', function() {
if (confirm('This will clear all temporary files and reset the processing state. Continue?')) {
const clearBtn = document.getElementById('clearBtn');
const clearProgressContainer = document.getElementById('clearProgressContainer');
const clearProgress = document.getElementById('clearProgress');
// Disable button and show progress
clearBtn.disabled = true;
clearProgressContainer.style.display = 'block';
clearProgress.value = 0;
// Animate progress bar
let progress = 0;
const progressInterval = setInterval(() => {
progress += Math.random() * 15; // Random increment for visual effect
if (progress > 90) progress = 90; // Cap at 90% until actual completion
clearProgress.value = progress;
}, 100);
fetch('/clear', { method: 'POST' })
.then(response => response.json())
.then(data => {
clearInterval(progressInterval);
clearProgress.value = 100;
// Hide progress after a short delay
setTimeout(() => {
clearProgressContainer.style.display = 'none';
clearBtn.disabled = false;
alert(data.message);
location.reload(); // Refresh the page
}, 500);
})
.catch(err => {
clearInterval(progressInterval);
clearProgressContainer.style.display = 'none';
clearBtn.disabled = false;
alert('Error clearing files: ' + err);
});
}
});
</script>
</body>
</html>
+227
View File
@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html>
<head>
<title>Job Status - End of Year Statements</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.logo {
max-width: 200px;
height: auto;
}
.job-section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.status-section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
progress {
width: 100%;
height: 20px;
}
.status-processing {
color: #007bff;
}
.status-completed {
color: #28a745;
}
.status-failed {
color: #dc3545;
}
.nav-links {
text-align: center;
margin-bottom: 20px;
}
.nav-links a {
color: #007bff;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
.nav-links a:hover {
text-decoration: underline;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.download-btn {
background-color: #28a745;
}
.back-btn {
background-color: #6c757d;
}
.error {
color: red;
margin-top: 10px;
}
.job-info {
margin-bottom: 20px;
}
.job-info div {
margin-bottom: 5px;
}
.auth-section {
margin-top: 20px;
text-align: center;
}
.user-info {
display: inline-block;
background: white;
padding: 10px 20px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.user-info span {
margin-right: 15px;
font-weight: bold;
}
.logout-btn, .login-btn {
background-color: #dc3545;
color: white;
padding: 6px 12px;
border: none;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
display: inline-block;
}
.login-btn {
background-color: #28a745;
}
.logout-btn:hover, .login-btn:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="header">
<img src="{{ url_for('static', filename='trbc-logo-full.png') }}" alt="Logo" class="logo">
<h1>Job Status</h1>
<!-- Authentication section -->
<div class="auth-section">
{% if session.oauth_token %}
<div class="user-info">
<span>Welcome, {{ user_info.displayName or user_info.givenName or 'User' }}!</span>
<a href="{{ url_for('logout') }}" class="logout-btn">Logout</a>
</div>
{% else %}
<div class="login-prompt">
<a href="{{ url_for('login') }}" class="login-btn">Login with Microsoft</a>
</div>
{% endif %}
</div>
</div>
<div class="nav-links">
<a href="{{ url_for('index') }}">Upload New Files</a> |
<a href="{{ url_for('results') }}">View All Jobs & Downloads</a>
</div>
<div class="job-section">
<h2>Job Information</h2>
<div class="job-info">
<div><strong>Job Name:</strong> {{ job.id }}</div>
<div><strong>Started:</strong> {{ job.timestamp.strftime('%Y-%m-%d %H:%M:%S') if job.timestamp else 'Unknown' }}</div>
<div><strong>Files:</strong> {{ job.file_count if job.file_count else 'Processing...' }}</div>
<div><strong>Status:</strong>
<span class="status-{{ job.status }}">
{{ job.status.title() }}
</span>
</div>
</div>
{% if job.status == 'processing' %}
<div class="status-section">
<h3>Processing Progress</h3>
<p id="statusMessage">{{ job.message }}</p>
<progress id="progressBar" value="{{ job.progress }}" max="100"></progress>
<div style="margin-top: 10px;">
<strong>{{ job.progress }}% Complete</strong>
</div>
</div>
{% endif %}
{% if job.status == 'completed' %}
<div class="status-section">
<h3>Processing Complete!</h3>
<p>{{ job.message }}</p>
<progress value="100" max="100"></progress>
<div style="margin-top: 20px;">
<a href="{{ url_for('download_job', job_id=job.id) }}" class="download-btn" style="color: white; text-decoration: none; padding: 10px 20px; border-radius: 4px; display: inline-block;">Download Results</a>
</div>
</div>
{% endif %}
{% if job.status == 'failed' %}
<div class="status-section">
<h3>Processing Failed</h3>
<p>{{ job.message }}</p>
{% if job.error %}
<div class="error">
<strong>Error:</strong> {{ job.error }}
</div>
{% endif %}
<progress value="0" max="100"></progress>
</div>
{% endif %}
</div>
<div class="nav-links">
<a href="{{ url_for('index') }}" class="back-btn">Back to Upload</a>
<a href="{{ url_for('results') }}">View All Jobs</a>
</div>
{% if job.status == 'processing' %}
<script>
// Auto-refresh for processing jobs
function updateStatus() {
fetch('/api/job/{{ job.id }}/status')
.then(response => response.json())
.then(data => {
document.getElementById('statusMessage').textContent = data.message;
document.getElementById('progressBar').value = data.progress;
if (data.status === 'completed' || data.status === 'failed') {
// Reload the page to show completion/failure state
location.reload();
}
})
.catch(err => {
console.log('Status update error:', err);
});
}
// Update status every 2 seconds
setInterval(updateStatus, 2000);
</script>
{% endif %}
</body>
</html>
+242
View File
@@ -0,0 +1,242 @@
<!DOCTYPE html>
<html>
<head>
<title>All Jobs - End of Year Statements</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.logo {
max-width: 200px;
height: auto;
}
.jobs-section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.job-item {
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
margin-bottom: 10px;
background: #fafafa;
}
.job-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.job-info {
flex-grow: 1;
}
.job-actions {
display: flex;
gap: 10px;
}
button {
background-color: #007bff;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.delete-btn {
background-color: #dc3545;
}
.download-btn {
background-color: #28a745;
}
.view-btn {
background-color: #17a2b8;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.no-jobs {
text-align: center;
color: #666;
font-style: italic;
}
.back-link {
display: inline-block;
margin-bottom: 20px;
color: #007bff;
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
}
.nav-links {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.nav-link {
color: #007bff;
text-decoration: none;
font-weight: bold;
padding: 8px 16px;
border: 2px solid #007bff;
border-radius: 4px;
transition: all 0.3s ease;
}
.nav-link:hover {
background-color: #007bff;
color: white;
}
.status-completed {
color: #28a745;
font-weight: bold;
}
.status-processing {
color: #ffc107;
font-weight: bold;
}
.status-failed {
color: #dc3545;
font-weight: bold;
}
.status-queued {
color: #6c757d;
font-weight: bold;
}
.auth-section {
margin-top: 20px;
text-align: center;
}
.user-info {
display: inline-block;
background: white;
padding: 10px 20px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.user-info span {
margin-right: 15px;
font-weight: bold;
}
.logout-btn, .login-btn {
background-color: #dc3545;
color: white;
padding: 6px 12px;
border: none;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
display: inline-block;
}
.login-btn {
background-color: #28a745;
}
.logout-btn:hover, .login-btn:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="header">
<img src="{{ url_for('static', filename='trbc-logo-full.png') }}" alt="Logo" class="logo">
<h1>All Jobs</h1>
<p>View all your PDF processing jobs</p>
<!-- Authentication section -->
<div class="auth-section">
{% if session.oauth_token %}
<div class="user-info">
<span>Welcome, {{ user_info.displayName or user_info.givenName or 'User' }}!</span>
<a href="{{ url_for('logout') }}" class="logout-btn">Logout</a>
</div>
{% else %}
<div class="login-prompt">
<a href="{{ url_for('login') }}" class="login-btn">Login with Microsoft</a>
</div>
{% endif %}
</div>
</div>
<div class="nav-links">
<a href="{{ url_for('index') }}" class="nav-link">📤 Upload Files</a>
<a href="{{ url_for('results') }}" class="nav-link">📋 View Results</a>
<a href="{{ url_for('jobs') }}" class="nav-link">📊 View All Jobs</a>
</div>
<a href="{{ url_for('index') }}" class="back-link">← Back to Upload</a>
<a href="{{ url_for('clear_and_upload') }}" class="back-link" style="margin-left: 20px;">🔄 Reprocess Files</a>
<div class="jobs-section">
<h2>All Jobs</h2>
{% if jobs %}
{% for job in jobs %}
<div class="job-item">
<div class="job-header">
<div class="job-info">
<strong>Job Name:</strong> {{ job.id }}<br>
<strong>Started:</strong> {{ job.timestamp.strftime('%Y-%m-%d %H:%M:%S') if job.timestamp else 'Unknown' }}<br>
{% if job.file_count %}
<strong>Files:</strong> {{ job.file_count }}<br>
{% endif %}
<strong>Status:</strong>
{% if job.status == 'completed' %}
<span class="status-completed">Completed</span>
{% elif job.status == 'processing' %}
<span class="status-processing">Processing</span>
{% elif job.status == 'failed' %}
<span class="status-failed">Failed</span>
{% elif job.status == 'queued' %}
<span class="status-queued">Queued</span>
{% else %}
<span>{{ job.status|title }}</span>
{% endif %}
{% if job.get('error') %}
<br><strong>Error:</strong> {{ job.error }}
{% endif %}
{% if job.get('message') %}
<br><strong>Message:</strong> {{ job.message }}
{% endif %}
</div>
<div class="job-actions">
<a href="{{ url_for('job_status', job_id=job.id) }}" class="view-btn" style="display: inline-block; padding: 8px 16px; text-decoration: none; color: white; background-color: #17a2b8; border-radius: 4px;">View Details</a>
{% if job.status == 'completed' %}
<form action="{{ url_for('download_job', job_id=job.id) }}" method="get" style="display: inline;">
<button type="submit" class="download-btn">Download ZIP</button>
</form>
{% endif %}
<form action="{{ url_for('delete_job', job_id=job.id) }}" method="post" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this job?')">
<button type="submit" class="delete-btn">Delete</button>
</form>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p class="no-jobs">No jobs yet. <a href="{{ url_for('index') }}">Upload some files</a> to get started.</p>
{% endif %}
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div style="background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px;">
{% for message in messages %}
<p style="margin: 0; color: #28a745;">{{ message }}</p>
{% endfor %}
</div>
{% endif %}
{% endwith %}
</body>
</html>
+219
View File
@@ -0,0 +1,219 @@
<!DOCTYPE html>
<html>
<head>
<title>Processing Results - End of Year Statements</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.logo {
max-width: 200px;
height: auto;
}
.results-section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.job-item {
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
margin-bottom: 10px;
background: #fafafa;
}
.job-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.job-info {
flex-grow: 1;
}
.job-actions {
display: flex;
gap: 10px;
}
button {
background-color: #007bff;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.delete-btn {
background-color: #dc3545;
}
.download-btn {
background-color: #28a745;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.no-jobs {
text-align: center;
color: #666;
font-style: italic;
}
.back-link {
display: inline-block;
margin-bottom: 20px;
color: #007bff;
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
}
.nav-links {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.nav-link {
color: #007bff;
text-decoration: none;
font-weight: bold;
padding: 8px 16px;
border: 2px solid #007bff;
border-radius: 4px;
transition: all 0.3s ease;
}
.nav-link:hover {
background-color: #007bff;
color: white;
}
.status-completed {
color: #28a745;
font-weight: bold;
}
.status-failed {
color: #dc3545;
font-weight: bold;
}
.auth-section {
margin-top: 20px;
text-align: center;
}
.user-info {
display: inline-block;
background: white;
padding: 10px 20px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.user-info span {
margin-right: 15px;
font-weight: bold;
}
.logout-btn, .login-btn {
background-color: #dc3545;
color: white;
padding: 6px 12px;
border: none;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
display: inline-block;
}
.login-btn {
background-color: #28a745;
}
.logout-btn:hover, .login-btn:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="header">
<img src="{{ url_for('static', filename='trbc-logo-full.png') }}" alt="Logo" class="logo">
<h1>Processing Results</h1>
<p>View and download your completed PDF processing jobs</p>
<!-- Authentication section -->
<div class="auth-section">
{% if session.oauth_token %}
<div class="user-info">
<span>Welcome, {{ user_info.displayName or user_info.givenName or 'User' }}!</span>
<a href="{{ url_for('logout') }}" class="logout-btn">Logout</a>
</div>
{% else %}
<div class="login-prompt">
<a href="{{ url_for('login') }}" class="login-btn">Login with Microsoft</a>
</div>
{% endif %}
</div>
</div>
<div class="nav-links">
<a href="{{ url_for('index') }}" class="nav-link">📤 Upload Files</a>
<a href="{{ url_for('results') }}" class="nav-link">📋 View Results</a>
<a href="{{ url_for('jobs') }}" class="nav-link">📊 View All Jobs</a>
</div>
<a href="{{ url_for('index') }}" class="back-link">← Back to Upload</a>
<a href="{{ url_for('clear_and_upload') }}" class="back-link" style="margin-left: 20px;">🔄 Reprocess Files</a>
<div class="results-section">
<h2>Completed Jobs</h2>
{% if jobs %}
{% for job in jobs %}
<div class="job-item">
<div class="job-header">
<div class="job-info">
<strong>Job Name:</strong> {{ job.id }}<br>
<strong>Processed:</strong> {{ job.timestamp.strftime('%Y-%m-%d %H:%M:%S') if job.timestamp else 'Unknown' }}<br>
<strong>Files:</strong> {{ job.file_count }}<br>
<strong>Status:</strong>
{% if job.status == 'completed' %}
<span class="status-completed">Completed</span>
{% else %}
<span class="status-failed">Failed</span>
{% endif %}
{% if job.get('error') %}
<br><strong>Error:</strong> {{ job.error }}
{% endif %}
</div>
<div class="job-actions">
{% if job.status == 'completed' %}
<form action="{{ url_for('download_job', job_id=job.id) }}" method="get" style="display: inline;">
<button type="submit" class="download-btn">Download ZIP</button>
</form>
{% endif %}
<form action="{{ url_for('delete_job', job_id=job.id) }}" method="post" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this job?')">
<button type="submit" class="delete-btn">Delete</button>
</form>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p class="no-jobs">No completed jobs yet. <a href="{{ url_for('index') }}">Upload some files</a> to get started.</p>
{% endif %}
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div style="background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px;">
{% for message in messages %}
<p style="margin: 0; color: #28a745;">{{ message }}</p>
{% endfor %}
</div>
{% endif %}
{% endwith %}
</body>
</html>