cv-site/templates/language-switch.html

<!-- Primary response: Updated language selector -->
<div class="language-selector" id="language-selector"
     _="on htmx:beforeRequest from .selector-btn
          add .active to #skeleton-loader
        end
        on htmx:afterSwap from .selector-btn
          wait 100ms
          remove .active from #skeleton-loader
        end">
    <button class="selector-btn {{if eq .Lang "en"}}active{{end}}"
            data-short="EN"
            hx-get="/switch-language?lang=en"
            hx-target="#language-selector"
            hx-swap="outerHTML swap:250ms settle:250ms"
            hx-push-url="/?lang=en"
            aria-label="English">
        <span>English</span>
        <iconify-icon icon="mdi:loading"
                      class="htmx-indicator spinning small light"
                      width="14"
                      height="14"
                      aria-label="Loading"></iconify-icon>
    </button>
    <button class="selector-btn {{if eq .Lang "es"}}active{{end}}"
            data-short="ES"
            hx-get="/switch-language?lang=es"
            hx-target="#language-selector"
            hx-swap="outerHTML swap:250ms settle:250ms"
            hx-push-url="/?lang=es"
            aria-label="Español">
        <span>Español</span>
        <iconify-icon icon="mdi:loading"
                      class="htmx-indicator spinning small light"
                      width="14"
                      height="14"
                      aria-label="Loading"></iconify-icon>
    </button>
</div>

<!-- Out-of-band swap: Page 1 content wrapper with fade transition -->
<div id="cv-inner-content-page-1"
     class="cv-page-content-wrapper"
     hx-swap-oob="innerHTML">
    {{template "title-badges" .}}

    <!-- Page 1 Content Grid: Left Sidebar + Main Content -->
    <div class="page-content">
        <!-- Left Sidebar - Skills (first half) -->
        <aside class="cv-sidebar cv-sidebar-left">
            <details class="sidebar-accordion" open>
                <summary class="sidebar-accordion-header">
                    <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Competencias Técnicas{{else}}Technical Skills{{end}}</span>
                    <iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
                </summary>
                <div class="sidebar-accordion-content">
                {{range .SkillsLeft}}
                <section class="sidebar-section">
                    <details open>
                        <summary>
                            <h3 class="sidebar-title">{{.Category}}</h3>
                        </summary>
                        <div class="sidebar-content">
                            {{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
                        </div>
                    </details>
                </section>
                {{end}}
                </div>
            </details>
        </aside>

        <!-- Main Content Area - Page 1 -->
        <main class="cv-main">
            {{template "section-header" .}}
            {{template "section-education" .}}
            {{template "section-skills-summary" .}}
            {{template "section-experience" .}}
        </main>
    </div>
</div>

<!-- Out-of-band swap: Page 2 content wrapper with fade transition -->
<div id="cv-inner-content-page-2"
     class="cv-page-content-wrapper"
     hx-swap-oob="innerHTML">
    {{template "title-badges" .}}

    <!-- Page 2 Content Grid: Main Content + Right Sidebar -->
    <div class="page-content">
        <!-- Main Content Area - Page 2 -->
        <main class="cv-main">
            {{template "section-awards" .}}
            {{template "section-projects" .}}
            {{template "section-courses" .}}
            {{template "section-languages" .}}
            {{template "section-references" .}}
            {{template "section-other" .}}
        </main>

        <!-- Right Sidebar - Skills (second half) -->
        <aside class="cv-sidebar cv-sidebar-right">
            <details class="sidebar-accordion" open>
                <summary class="sidebar-accordion-header">
                    <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
                    <span>{{if eq .Lang "es"}}Más Competencias{{else}}More Skills{{end}}</span>
                    <iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
                </summary>
                <div class="sidebar-accordion-content">
                {{range .SkillsRight}}
                <section class="sidebar-section">
                    <details open>
                        <summary>
                            <h3 class="sidebar-title">{{.Category}}</h3>
                        </summary>
                        <div class="sidebar-content">
                            {{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
                        </div>
                    </details>
                </section>
                {{end}}
                </div>
            </details>
        </aside>
    </div>

    {{template "cv-footer" .}}
</div>