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" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuántos años de experiencia tienes?{{else}}How many years of experience do you have?{{end}}')">{{if eq .Lang "es"}}¿Cuántos años de experiencia tienes?{{else}}How many years of experience?{{end}}</button>
                        <button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿En qué empresas has trabajado?{{else}}What companies have you worked at?{{end}}')">{{if eq .Lang "es"}}¿En qué empresas has trabajado?{{else}}What companies have you worked at?{{end}}</button>
                        <button class="chat-help-q" onclick="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" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué hacías en SAP?{{else}}What did you do at SAP?{{end}}')">{{if eq .Lang "es"}}¿Qué hacías en SAP?{{else}}What did you 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" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué lenguajes de programación conoces?{{else}}What programming languages do you know?{{end}}')">{{if eq .Lang "es"}}¿Qué lenguajes conoces?{{else}}What languages do you know?{{end}}</button>
                        <button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Has trabajado con React? ¿Dónde?{{else}}Have you worked with React? Where?{{end}}')">{{if eq .Lang "es"}}¿Has trabajado con React?{{else}}Have you worked with React?{{end}}</button>
                        <button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuál es tu experiencia con Go?{{else}}What is your Go experience?{{end}}')">{{if eq .Lang "es"}}¿Experiencia con Go?{{else}}Go experience?{{end}}</button>
                        <button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Conoces Node.js?{{else}}Do you know Node.js?{{end}}')">{{if eq .Lang "es"}}¿Conoces Node.js?{{else}}Do you know Node.js?{{end}}</button>
                        <button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Tienes experiencia con Docker?{{else}}Do you 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" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué proyectos personales has creado?{{else}}What personal projects have you built?{{end}}')">{{if eq .Lang "es"}}¿Qué proyectos has creado?{{else}}What projects have you built?{{end}}</button>
                        <button class="chat-help-q" onclick="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" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué proyectos open-source mantienes?{{else}}What open-source projects do you 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" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué certificaciones tienes?{{else}}What certifications do you have?{{end}}')">{{if eq .Lang "es"}}¿Certificaciones?{{else}}Certifications?{{end}}</button>
                        <button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Dónde estudiaste?{{else}}Where did you study?{{end}}')">{{if eq .Lang "es"}}¿Dónde estudiaste?{{else}}Where did you study?{{end}}</button>
                        <button class="chat-help-q" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué cursos has completado?{{else}}What courses have you 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" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuáles son tus principales habilidades técnicas?{{else}}What are your main technical skills?{{end}}')">{{if eq .Lang "es"}}¿Habilidades técnicas principales?{{else}}Main technical skills?{{end}}</button>
                        <button class="chat-help-q" onclick="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" onclick="closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué idiomas hablas?{{else}}What languages do you speak?{{end}}')">{{if eq .Lang "es"}}¿Qué idiomas hablas?{{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}}