cv-site/templates/partials/modals/chat-help-modal.html

{{define "chat-help-modal"}}
<!-- Chat Help Modal - Native Dialog with Accordion -->
<dialog id="chat-help-modal" class="info-modal chat-help-fullscreen no-print"
        _="on click call closeOnBackdrop(me, event)">
    <div class="info-modal-content">
        <button class="info-modal-close" commandfor="chat-help-modal" command="close" aria-label="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
            <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
        </button>

        <div class="info-modal-header">
            <h2>{{if eq .Lang "es"}}Asistente del CV{{else}}CV Assistant{{end}}</h2>
            <div class="info-modal-cv-title">
                <span class="keyboard-icon-wrapper">
                    <iconify-icon icon="mdi:robot-happy-outline" width="32" height="32"></iconify-icon>
                </span>
                {{if eq .Lang "es"}}Asistente inteligente con IA{{else}}AI-powered intelligent assistant{{end}}
            </div>
        </div>

        <div class="info-modal-body">
            <p class="chat-help-intro">
                {{if eq .Lang "es"}}Pregunta lo que quieras sobre este CV. Haz clic en cualquier pregunta para enviarla directamente al asistente.{{else}}Ask anything about this CV. Click any question to send it directly to the assistant.{{end}}
            </p>

            <div class="chat-help-accordion">

                <!-- Experience -->
                <details class="chat-help-group" open>
                    <summary>
                        <iconify-icon icon="mdi:briefcase-outline"></iconify-icon>
                        {{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}
                    </summary>
                    <div class="chat-help-questions">
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuántos años de experiencia tiene Juan?{{else}}How many years of experience does Juan have?{{end}}')">{{if eq .Lang "es"}}¿Cuántos años de experiencia tiene?{{else}}How many years of experience?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿En qué empresas ha trabajado?{{else}}What companies has he worked at?{{end}}')">{{if eq .Lang "es"}}¿En qué empresas ha trabajado?{{else}}What companies has he worked at?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}Cuéntame sobre Olympic Broadcasting{{else}}Tell me about Olympic Broadcasting{{end}}')">{{if eq .Lang "es"}}Cuéntame sobre Olympic Broadcasting{{else}}Tell me about Olympic Broadcasting{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué hacía en SAP?{{else}}What did he do at SAP?{{end}}')">{{if eq .Lang "es"}}¿Qué hacía en SAP?{{else}}What did he do at SAP?{{end}}</button>
                    </div>
                </details>

                <!-- Technologies -->
                <details class="chat-help-group">
                    <summary>
                        <iconify-icon icon="mdi:code-tags"></iconify-icon>
                        {{if eq .Lang "es"}}Tecnologías{{else}}Technologies{{end}}
                    </summary>
                    <div class="chat-help-questions">
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué lenguajes de programación conoce?{{else}}What programming languages does he know?{{end}}')">{{if eq .Lang "es"}}¿Qué lenguajes conoce?{{else}}What languages does he know?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Ha trabajado con React? ¿Dónde?{{else}}Has he worked with React? Where?{{end}}')">{{if eq .Lang "es"}}¿Ha trabajado con React?{{else}}Has he worked with React?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuál es su experiencia con Go?{{else}}What is his Go experience?{{end}}')">{{if eq .Lang "es"}}¿Experiencia con Go?{{else}}Go experience?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Conoce Node.js?{{else}}Does he know Node.js?{{end}}')">{{if eq .Lang "es"}}¿Conoce Node.js?{{else}}Does he know Node.js?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Tiene experiencia con Docker?{{else}}Does he have Docker experience?{{end}}')">{{if eq .Lang "es"}}¿Experiencia con Docker?{{else}}Docker experience?{{end}}</button>
                    </div>
                </details>

                <!-- Projects -->
                <details class="chat-help-group">
                    <summary>
                        <iconify-icon icon="mdi:rocket-launch-outline"></iconify-icon>
                        {{if eq .Lang "es"}}Proyectos{{else}}Projects{{end}}
                    </summary>
                    <div class="chat-help-questions">
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué proyectos personales ha creado?{{else}}What personal projects has he built?{{end}}')">{{if eq .Lang "es"}}¿Qué proyectos ha creado?{{else}}What projects has he built?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}Cuéntame sobre Immich Photo Manager{{else}}Tell me about Immich Photo Manager{{end}}')">{{if eq .Lang "es"}}Sobre Immich Photo Manager{{else}}About Immich Photo Manager{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué proyectos open-source mantiene?{{else}}What open-source projects does he maintain?{{end}}')">{{if eq .Lang "es"}}¿Proyectos open-source?{{else}}Open-source projects?{{end}}</button>
                    </div>
                </details>

                <!-- Education -->
                <details class="chat-help-group">
                    <summary>
                        <iconify-icon icon="mdi:school-outline"></iconify-icon>
                        {{if eq .Lang "es"}}Formación{{else}}Education{{end}}
                    </summary>
                    <div class="chat-help-questions">
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué certificaciones tiene?{{else}}What certifications does he have?{{end}}')">{{if eq .Lang "es"}}¿Certificaciones?{{else}}Certifications?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Dónde estudió?{{else}}Where did he study?{{end}}')">{{if eq .Lang "es"}}¿Dónde estudió?{{else}}Where did he study?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué cursos ha completado?{{else}}What courses has he completed?{{end}}')">{{if eq .Lang "es"}}¿Cursos completados?{{else}}Courses completed?{{end}}</button>
                    </div>
                </details>

                <!-- Skills -->
                <details class="chat-help-group">
                    <summary>
                        <iconify-icon icon="mdi:star-outline"></iconify-icon>
                        {{if eq .Lang "es"}}Habilidades{{else}}Skills{{end}}
                    </summary>
                    <div class="chat-help-questions">
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuáles son sus principales habilidades técnicas?{{else}}What are his main technical skills?{{end}}')">{{if eq .Lang "es"}}¿Habilidades técnicas principales?{{else}}Main technical skills?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué hay de CI/CD?{{else}}What about CI/CD?{{end}}')">{{if eq .Lang "es"}}¿Experiencia con CI/CD?{{else}}CI/CD experience?{{end}}</button>
                        <button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué idiomas habla?{{else}}What languages does he speak?{{end}}')">{{if eq .Lang "es"}}¿Qué idiomas habla?{{else}}Languages spoken?{{end}}</button>
                    </div>
                </details>

            </div>

            <!-- How it works footer -->
            <div class="chat-help-footer">
                <iconify-icon icon="mdi:information-outline"></iconify-icon>
                <span>{{if eq .Lang "es"}}Impulsado por Google ADK Go 1.0 y Gemini AI. Las respuestas provienen de los datos reales del CV.{{else}}Powered by Google ADK Go 1.0 and Gemini AI. Answers come from actual CV data.{{end}}</span>
            </div>
        </div>
    </div>
</dialog>

<!-- Helper function: close modal, open chat, send question -->
<script>
function closeChatHelpAndAsk(question) {
    // Close the modal
    document.getElementById('chat-help-modal').close();
    // Open chat panel if not open
    var panel = document.getElementById('chat-panel');
    var btn = document.getElementById('chat-toggle-btn');
    if (!panel.classList.contains('chat-open')) {
        panel.classList.add('chat-open');
        btn.classList.add('mascot-active');
    }
    // Set the question and submit
    document.getElementById('chat-input').value = question;
    htmx.trigger(document.getElementById('chat-form'), 'submit');
}
</script>
{{end}}