{{define "pdf-modal"}}
<!-- PDF Download Modal - Interactive Thumbnails -->
<dialog id="pdf-modal" class="info-modal pdf-download-modal no-print"
        _="on click
             if event.target is me
               call me.close()
             end">
    <div class="info-modal-content" id="pdf-modal-content">
        <!-- Loading Overlay -->
        <div class="pdf-loading-overlay" id="pdf-loading-overlay">
            <div class="pdf-loading-content">
                <div class="pdf-loading-spinner"></div>
                <h3 class="pdf-loading-title" id="pdf-loading-title">
                    {{if eq .Lang "es"}}Preparando PDF...{{else}}Preparing PDF...{{end}}
                </h3>
                <p class="pdf-loading-message" id="pdf-loading-message">
                    {{if eq .Lang "es"}}Por favor espera mientras generamos tu CV{{else}}Please wait while we generate your CV{{end}}
                </p>
                <p class="pdf-loading-estimate" id="pdf-loading-estimate"></p>
            </div>
        </div>

        <!-- Close Button -->
        <button class="info-modal-close"
                onclick="document.getElementById('pdf-modal').close()"
                aria-label="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
            <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
        </button>

        <!-- Header -->
        <div class="info-modal-header">
            <iconify-icon icon="catppuccin:pdf" width="40" height="40" style="margin-bottom: 0.5rem;"></iconify-icon>
            <h2>{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}</h2>
            <p class="pdf-modal-subtitle">
                {{if eq .Lang "es"}}Elige tu formato preferido{{else}}Choose your preferred format{{end}}
            </p>
        </div>

        <!-- Body: Three Thumbnail Cards -->
        <div class="pdf-options-grid">

            <!-- Short CV Card -->
            <div class="pdf-option-card"
                 data-cv-format="short"
                 role="radio"
                 aria-checked="false"
                 aria-label="{{if eq .Lang "es"}}CV Corto - 4 páginas, información esencial{{else}}Short CV - 4 pages, essential information{{end}}"
                 tabindex="0"
                 _="on click
                      -- Remove selected from all cards
                      set cards to .pdf-option-card in #pdf-modal
                      for card in cards
                        remove .selected from card
                        set card's @aria-checked to 'false'
                      end

                      -- Add selected to this card
                      add .selected to me
                      set my @aria-checked to 'true'

                      -- Enable download button
                      set downloadBtn to .pdf-download-btn in #pdf-modal
                      remove @disabled from downloadBtn

                      -- Store selected format
                      set :selectedFormat to my @data-cv-format

                      -- Announce to screen readers
                      set announcement to #pdf-selection-announcement
                      if :selectedFormat is 'short'
                        set announcement.textContent to '{{if eq .Lang "es"}}Seleccionado: CV Corto - Una página{{else}}Selected: Short CV - One page{{end}}'
                      end
                    end

                    on keydown
                      if event.key is 'Enter' or event.key is ' '
                        halt the event
                        trigger click on me
                      end
                    end">

                <div class="pdf-thumbnail thumbnail-short">
                    <!-- Header representation -->
                    <div class="skeleton-block" style="height: 48px;"></div>

                    <!-- Content sections (compact) -->
                    <div class="skeleton-block" style="height: 60px;"></div>
                    <div class="skeleton-block" style="height: 60px;"></div>
                    <div class="skeleton-block" style="height: 60px;"></div>

                    <!-- Page count badge -->
                    <div class="thumbnail-badge">
                        {{if eq .Lang "es"}}4 Páginas{{else}}4 Pages{{end}}
                    </div>
                </div>

                <div class="pdf-option-info">
                    <h3>{{if eq .Lang "es"}}CV Corto (4 páginas){{else}}Short CV (4 pages){{end}}</h3>
                    <p>{{if eq .Lang "es"}}Información esencial{{else}}Essential info{{end}}</p>
                </div>

                <div class="pdf-option-badge">
                    <iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
                </div>
            </div>

            <!-- Extended CV Card -->
            <div class="pdf-option-card"
                 data-cv-format="long"
                 role="radio"
                 aria-checked="false"
                 aria-label="{{if eq .Lang "es"}}CV Extendido - 9 páginas, versión completa{{else}}Extended CV - 9 pages, full version{{end}}"
                 tabindex="0"
                 _="on click
                      -- Remove selected from all cards
                      set cards to .pdf-option-card in #pdf-modal
                      for card in cards
                        remove .selected from card
                        set card's @aria-checked to 'false'
                      end

                      -- Add selected to this card
                      add .selected to me
                      set my @aria-checked to 'true'

                      -- Enable download button
                      set downloadBtn to .pdf-download-btn in #pdf-modal
                      remove @disabled from downloadBtn

                      -- Store selected format
                      set :selectedFormat to my @data-cv-format

                      -- Announce to screen readers
                      set announcement to #pdf-selection-announcement
                      if :selectedFormat is 'long'
                        set announcement.textContent to '{{if eq .Lang "es"}}Seleccionado: CV Completo - Versión completa{{else}}Selected: Long CV - Full version{{end}}'
                      end
                    end

                    on keydown
                      if event.key is 'Enter' or event.key is ' '
                        halt the event
                        trigger click on me
                      end
                    end">

                <div class="pdf-thumbnail thumbnail-long">
                    <!-- Header representation -->
                    <div class="skeleton-block" style="height: 48px;"></div>

                    <!-- More content sections (detailed) -->
                    <div class="skeleton-block" style="height: 40px;"></div>
                    <div class="skeleton-block" style="height: 40px;"></div>
                    <div class="skeleton-block" style="height: 40px;"></div>
                    <div class="skeleton-block" style="height: 40px;"></div>
                    <div class="skeleton-block" style="height: 40px;"></div>

                    <!-- Page count badge -->
                    <div class="thumbnail-badge">
                        {{if eq .Lang "es"}}9 Páginas{{else}}9 Pages{{end}}
                    </div>
                </div>

                <div class="pdf-option-info">
                    <h3>{{if eq .Lang "es"}}CV Extendido (9 páginas){{else}}Extended CV (9 pages){{end}}</h3>
                    <p>{{if eq .Lang "es"}}Todos los detalles{{else}}All details{{end}}</p>
                </div>

                <div class="pdf-option-badge">
                    <iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
                </div>
            </div>

            <!-- Default CV Card (Recommended) -->
            <div class="pdf-option-card pdf-option-recommended"
                 data-cv-format="default"
                 role="radio"
                 aria-checked="false"
                 aria-label="{{if eq .Lang "es"}}CV Por Defecto - 5 páginas con habilidades (Recomendado){{else}}Default CV - 5 pages with skills (Recommended){{end}}"
                 tabindex="0"
                 _="on click
                      -- Remove selected from all cards
                      set cards to .pdf-option-card in #pdf-modal
                      for card in cards
                        remove .selected from card
                        set card's @aria-checked to 'false'
                      end

                      -- Add selected to this card
                      add .selected to me
                      set my @aria-checked to 'true'

                      -- Enable download button
                      set downloadBtn to .pdf-download-btn in #pdf-modal
                      remove @disabled from downloadBtn

                      -- Store selected format
                      set :selectedFormat to my @data-cv-format

                      -- Announce to screen readers
                      set announcement to #pdf-selection-announcement
                      if :selectedFormat is 'default'
                        set announcement.textContent to '{{if eq .Lang "es"}}Seleccionado: CV Por Defecto (Recomendado){{else}}Selected: Default CV (Recommended){{end}}'
                      end
                    end

                    on keydown
                      if event.key is 'Enter' or event.key is ' '
                        halt the event
                        trigger click on me
                      end
                    end">

                <div class="pdf-thumbnail thumbnail-default">
                    <!--  Two-column layout with sidebar -->
                    <div class="skeleton-block" style="height: 36px; margin-bottom: 6px;"></div>
                    <div style="display: flex; gap: 4px;">
                        <div style="width: 25%; display: flex; flex-direction: column; gap: 3px;">
                            <div class="skeleton-block" style="height: 20px;"></div>
                            <div class="skeleton-block" style="height: 16px;"></div>
                        </div>
                        <div style="width: 75%; display: flex; flex-direction: column; gap: 3px;">
                            <div class="skeleton-block" style="height: 32px;"></div>
                            <div class="skeleton-block" style="height: 32px;"></div>
                        </div>
                    </div>

                    <!-- Page count badge with star -->
                    <div class="thumbnail-badge" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-weight: 600;">
                        ⭐ {{if eq .Lang "es"}}5 Páginas{{else}}5 Pages{{end}}
                    </div>
                </div>

                <div class="pdf-option-info">
                    <h3>
                        {{if eq .Lang "es"}}CV Por Defecto{{else}}Default CV{{end}}
                        <span style="color: #667eea; font-size: 0.9em;">⭐</span>
                    </h3>
                    <p style="font-weight: 500;">{{if eq .Lang "es"}}Corto con habilidades - Recomendado{{else}}Short with skills - Recommended{{end}}</p>
                </div>

                <div class="pdf-option-badge">
                    <iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
                </div>
            </div>
        </div>

        <!-- Footer: Download Button -->
        <div class="pdf-modal-footer">
            <button class="pdf-download-btn"
                    id="pdf-download-btn"
                    disabled
                    onclick="downloadPDF()">
                <iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
                {{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}
            </button>
        </div>

        <script>
        function downloadPDF() {
            const selectedCard = document.querySelector('#pdf-modal .pdf-option-card.selected');
            if (!selectedCard) {
                console.error('No card selected');
                return;
            }

            const selectedFormat = selectedCard.getAttribute('data-cv-format');
            const lang = '{{.Lang}}';
            const isSpanish = lang === 'es';
            let url;
            let estimatedTime = 4; // Default: 4 seconds
            let formatName = '';

            console.log('Download requested for format:', selectedFormat);

            // Build URL and set estimated time based on format
            if (selectedFormat === 'short') {
                // Short CV: clean version (no skills), short length
                url = `/export/pdf?lang=${lang}&length=short&icons=show&version=clean`;
                estimatedTime = 3;
                formatName = isSpanish ? 'CV Corto (4 páginas)' : 'Short CV (4 pages)';
            } else if (selectedFormat === 'default') {
                // Default CV: use shortcut URL (short with skills, 5 pages)
                const currentYear = new Date().getFullYear();
                url = `/cv-jamr-${currentYear}-${lang}.pdf`;
                estimatedTime = 4;
                formatName = isSpanish ? 'CV Por Defecto (5 páginas)' : 'Default CV (5 pages)';
            } else if (selectedFormat === 'long') {
                // Long CV: with skills sidebar, long length
                url = `/export/pdf?lang=${lang}&length=long&icons=show&version=with_skills`;
                estimatedTime = 8;
                formatName = isSpanish ? 'CV Extendido (9 páginas)' : 'Extended CV (9 pages)';
            } else if (selectedFormat === 'current') {
                // Current view: use localStorage settings
                let currentLength = localStorage.getItem('cv-length') || 'short';
                const currentIcons = localStorage.getItem('cv-icons') || 'show';
                const currentTheme = localStorage.getItem('cv-theme') || 'default';
                const version = currentTheme === 'clean' ? 'clean' : 'with_skills';
                url = `/export/pdf?lang=${lang}&length=${currentLength}&icons=${currentIcons}&version=${version}`;
                estimatedTime = currentLength === 'long' ? 8 : 4;
                formatName = isSpanish ? 'CV Actual' : 'Current CV';
            }

            // Show loading overlay in modal
            const overlay = document.getElementById('pdf-loading-overlay');
            const modalContent = document.getElementById('pdf-modal-content');
            const estimateEl = document.getElementById('pdf-loading-estimate');
            const modal = document.getElementById('pdf-modal');

            overlay.classList.add('active');
            modalContent.classList.add('loading-active');

            // Update estimate message
            const estimateMsg = isSpanish
                ? `Generando ${formatName}... Esto puede tardar ~${estimatedTime} segundos`
                : `Generating ${formatName}... This may take ~${estimatedTime} seconds`;
            estimateEl.textContent = estimateMsg;

            // Track if modal is closed by user during download
            let modalClosedByUser = false;
            const onModalClose = () => {
                modalClosedByUser = true;

                // Show toast when user closes modal
                if (window.showPDFToast) {
                    window.showPDFToast({
                        icon: '📥',
                        title: isSpanish ? 'Preparando PDF...' : 'Preparing PDF...',
                        message: isSpanish
                            ? `Generando ${formatName}... (~${estimatedTime}s)`
                            : `Generating ${formatName}... (~${estimatedTime}s)`,
                        duration: estimatedTime * 1000,
                        autoHide: false // We'll manually update it
                    });
                }
            };

            // Listen for modal close
            modal.addEventListener('close', onModalClose, { once: true });

            console.log('Navigating to:', url);

            // Trigger download
            window.location.href = url;

            // After estimated time: update toast to success or close modal
            setTimeout(() => {
                overlay.classList.remove('active');
                modalContent.classList.remove('loading-active');

                if (modalClosedByUser && window.showPDFToast) {
                    // Update toast to success
                    window.showPDFToast({
                        icon: '✅',
                        title: isSpanish ? '¡PDF Listo!' : 'PDF Ready!',
                        message: isSpanish
                            ? 'Revisa tu carpeta de descargas'
                            : 'Check your downloads folder',
                        duration: 3000,
                        autoHide: true
                    });
                } else {
                    // Close modal if still open
                    modal.close();
                }
            }, estimatedTime * 1000);
        }
        </script>

        <!-- Screen Reader Announcement Area -->
        <div id="pdf-selection-announcement" class="sr-only" aria-live="polite" aria-atomic="true"></div>
    </div>
</dialog>
{{end}}