<style nonce="{{ csp_nonce }}">
.processing-card {
text-align: center;
padding: 48px 24px;
max-width: 600px;
margin: 0 auto;
}
.processing-spinner {
font-size: 3rem;
animation: pulse-spin 2s ease-in-out infinite;
margin-bottom: 20px;
}
@keyframes pulse-spin {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.1); }
}
.processing-card h2 {
font-size: 1.3rem;
margin: 0 0 8px;
color: var(--accent, #2563eb);
}
.processing-card .file-info {
color: var(--text-muted, #999);
font-size: 0.9rem;
margin-bottom: 20px;
}
.processing-card .message {
color: var(--text-muted, #999);
font-size: 0.9rem;
line-height: 1.5;
max-width: 420px;
margin: 0 auto 24px;
}
.processing-tip {
margin-top: 24px;
padding: 16px;
background: var(--surface-2, #333);
border-radius: 8px;
font-size: 0.85rem;
color: var(--text-muted, #999);
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
/* Step indicator (initial state — matches polling template) */
.step-indicator { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 400px; margin: 0 auto 16px; }
.step-dot {
width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border, #333); background: transparent;
flex-shrink: 0; transition: all 0.3s;
}
.step-dot.active { border-color: var(--accent, #2563eb); background: var(--accent, #2563eb); animation: step-pulse 1.5s ease-in-out infinite; }
.step-line { flex: 1; height: 2px; background: var(--border, #333); }
.step-label { font-size: 0.75rem; color: var(--text-muted, #999); margin-top: 6px; text-align: center; }
.step-label.active { color: var(--accent, #2563eb); font-weight: 600; }
.step-group { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.step-detail { font-size: 0.85rem; color: var(--text-muted, #999); text-align: center; margin-top: 4px; }
@keyframes step-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
}
</style>
<div style="text-align:center; margin-bottom:8px;">
<a href="/account/analyses" style="color:var(--text-muted, #999); text-decoration:none; font-size:0.82rem;"
onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-muted, #999)'">
← Analysis History
</a>
</div>
<div class="result-card processing-card">
{% if mode_downgraded %}
<div style="margin-bottom:16px;padding:12px 16px;background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;font-size:0.85rem;color:#92400e;text-align:left;">
<strong>⚠ Full Analysis requires a Pro subscription.</strong>
Running sample-page analysis instead. <a href="/account" style="color:#d97706;text-decoration:underline;">Upgrade</a> to analyze all pages.
</div>
{% endif %}
<div class="processing-spinner">⏳</div>
<h2>Processing Your Plan Set</h2>
<div class="file-info">
<strong>{{ filename }}</strong> — {{ filesize_mb }} MB
{% if analysis_mode == 'compliance' %}
<span style="display:inline-block;margin-left:10px;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.4);color:#a78bfa;padding:2px 10px;border-radius:12px;font-size:0.8rem;">Compliance Check</span>
{% elif analysis_mode == 'full' %}
<span style="display:inline-block;margin-left:10px;background:rgba(234,179,8,0.15);border:1px solid rgba(234,179,8,0.4);color:#fbbf24;padding:2px 10px;border-radius:12px;font-size:0.8rem;">Full Analysis</span>
{% elif analysis_mode == 'sample' %}
<span style="display:inline-block;margin-left:10px;background:rgba(79,143,247,0.15);border:1px solid rgba(79,143,247,0.4);color:#4f8ff7;padding:2px 10px;border-radius:12px;font-size:0.8rem;">AI Analysis</span>
{% endif %}
</div>
<div class="message">
Large plan sets are analyzed in the background.
{% if user_email %}
We'll email <strong>{{ user_email }}</strong> when your analysis is ready.
{% else %}
Stay on this page to see results when ready.
{% endif %}
</div>
<!-- HTMX polls job status every 3 seconds -->
<div hx-get="/plan-jobs/{{ job_id }}/status"
hx-trigger="every 3s"
hx-swap="outerHTML"
id="job-status-poll">
<div class="step-indicator">
<div class="step-group">
<div class="step-dot active"></div>
<div class="step-label active">Analyzing</div>
</div>
<div class="step-line"></div>
<div class="step-group">
<div class="step-dot"></div>
<div class="step-label">Rendering</div>
</div>
<div class="step-line"></div>
<div class="step-group">
<div class="step-dot"></div>
<div class="step-label">Finalizing</div>
</div>
</div>
<div class="step-detail">Preparing analysis...</div>
<div style="margin-top: 16px;">
<button hx-post="/plan-jobs/{{ job_id }}/cancel"
hx-target="#job-status-poll"
hx-swap="outerHTML"
style="background:transparent; border:1px solid var(--border, #444); color:var(--text-muted, #999);
padding:8px 20px; border-radius:6px; font-size:0.85rem; cursor:pointer;"
onmouseover="this.style.borderColor='var(--error, #f87171)'; this.style.color='var(--error, #f87171)'"
onmouseout="this.style.borderColor='var(--border, #444)'; this.style.color='var(--text-muted, #999)'">
Cancel Analysis
</button>
</div>
</div>
<div class="processing-tip">
{% if user_email %}
💡 You can close this page — we'll email you when it's done.
{% else %}
💡 <a href="/auth/login" style="color: var(--accent);">Sign in</a> to receive email notifications for future analyses.
{% endif %}
</div>
</div>
