From 664cbca4b84916796590262d923beb7dcd62dfe7 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Wed, 4 Feb 2026 14:15:50 -0500
Subject: [PATCH] fix: replace Alpine.js button with anchor tag for PDF
 download

Issue: PDF download button wasn't working because Alpine.js doesn't
automatically initialize on dynamically loaded HTMX content. The
result.html template is loaded via HTMX polling, and the x-data
directive wasn't being processed on the new DOM elements.

Solution: Replaced the Alpine.js-powered button with a simple anchor
tag styled as a button. This works immediately without requiring
Alpine initialization and properly triggers browser download behavior.

Changes:
- Removed x-data, @click, :disabled, :class Alpine directives
- Changed <button> to <a> with href="{{ url_for('download_pdf') }}"
- Added download attribute for proper download hint
- Kept all styling and accessibility features
- Simplified implementation without loading state (unnecessary for downloads)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/frontend/templates/result.html | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/frontend/templates/result.html b/src/frontend/templates/result.html
index 79cb585..11bd3f2 100644
--- a/src/frontend/templates/result.html
+++ b/src/frontend/templates/result.html
@@ -107,20 +107,18 @@
 
         {# PDF Download Button #}
         <div class="has-text-centered mt-6"
-             x-data="{ downloading: false }"
              role="region"
              aria-label="Download options">
-            <button class="button is-primary is-medium"
-                    @click="downloading = true; window.location.href = '{{ url_for('download_pdf') }}'; setTimeout(() => downloading = false, 2000)"
-                    :disabled="downloading"
-                    :class="{ 'is-loading': downloading }"
-                    aria-label="Download SWOT analysis as PDF report"
-                    style="background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); border: none; font-weight: 600; padding: 0.75rem 2rem; box-shadow: var(--shadow-md); transition: all 0.3s ease;">
+            <a href="{{ url_for('download_pdf') }}"
+               class="button is-primary is-medium"
+               download
+               aria-label="Download SWOT analysis as PDF report"
+               style="background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); border: none; font-weight: 600; padding: 0.75rem 2rem; box-shadow: var(--shadow-md); transition: all 0.3s ease; display: inline-flex; align-items: center; text-decoration: none;">
                 <span class="icon">
                     <i class="fas fa-file-pdf"></i>
                 </span>
-                <span x-text="downloading ? 'Generating PDF...' : 'Download PDF Report'"></span>
-            </button>
+                <span>Download PDF Report</span>
+            </a>
             <p class="help mt-2"
                style="color: var(--neutral-600);">
                 Professional PDF report with full SWOT analysis