cv-site/templates/partials/modals/pdf-modal.html

{{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">
        <!-- 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">
            <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 - Una página, información esencial{{else}}Short CV - One page, 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"}}1 Página{{else}}1 Page{{end}}
                    </div>
                </div>

                <div class="pdf-option-info">
                    <h3>{{if eq .Lang "es"}}CV Corto{{else}}Short CV{{end}}</h3>
                    <p>{{if eq .Lang "es"}}Una página, información esencial{{else}}One page, essential info{{end}}</p>
                </div>

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

            <!-- Long CV Card -->
            <div class="pdf-option-card"
                 data-cv-format="long"
                 role="radio"
                 aria-checked="false"
                 aria-label="{{if eq .Lang "es"}}CV Completo - Versión completa, todos los detalles{{else}}Long CV - Full version, all details{{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"}}2 Páginas{{else}}2 Pages{{end}}
                    </div>
                </div>

                <div class="pdf-option-info">
                    <h3>{{if eq .Lang "es"}}CV Completo{{else}}Long CV{{end}}</h3>
                    <p>{{if eq .Lang "es"}}Versión completa, todos los detalles{{else}}Full version, all details{{end}}</p>
                </div>

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

            <!-- Custom CV Card (Placeholder) -->
            <div class="pdf-option-card"
                 data-cv-format="custom"
                 role="radio"
                 aria-checked="false"
                 aria-label="{{if eq .Lang "es"}}Personalizado - Personaliza secciones{{else}}Custom - Customize sections{{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 'custom'
                        set announcement.textContent to '{{if eq .Lang "es"}}Seleccionado: Personalizado{{else}}Selected: Custom format{{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-custom">
                    <!-- Centered icon instead of skeleton blocks -->
                    <div class="custom-placeholder">
                        <iconify-icon icon="mdi:help-circle-outline" width="80" height="80"></iconify-icon>
                        <p>{{if eq .Lang "es"}}Personalizar{{else}}Customize{{end}}</p>
                    </div>

                    <!-- Coming soon badge -->
                    <div class="thumbnail-badge">
                        {{if eq .Lang "es"}}Próximamente{{else}}Coming Soon{{end}}
                    </div>
                </div>

                <div class="pdf-option-info">
                    <h3>{{if eq .Lang "es"}}Personalizado{{else}}Custom{{end}}</h3>
                    <p>{{if eq .Lang "es"}}Personaliza secciones{{else}}Customize sections{{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"
                    disabled
                    _="on click
                        if :selectedFormat is not null
                          log 'Download requested for format:', :selectedFormat
                          -- TODO: Trigger actual PDF download when backend ready
                          -- Example: window.location.href = '/download-pdf?format=' + :selectedFormat
                          call alert('{{if eq .Lang "es"}}¡Descarga de PDF próximamente! Formato seleccionado: {{else}}PDF download coming soon! Selected format: {{end}}' + :selectedFormat)
                        end
                      end">
                <iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
                {{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}
            </button>
        </div>

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