{{define "info-modal"}}
<!-- Info Modal - Native Dialog -->
<dialog id="info-modal" class="info-modal no-print"
        _="on click
             if event.target is me
               call me.close()
             end">
    <div class="info-modal-content">
        <button class="info-modal-close" onclick="document.getElementById('info-modal').close()" aria-label="Close">
            <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
        </button>

        <div class="info-modal-header">
            <h2>{{.UI.InfoModal.Title}}</h2>
            <div class="info-modal-cv-title">
                CV {{.CurrentYear}} JAMR -
                <span class="photo-bracket-wrapper">
                    <img src="/static/images/profile/dni.jpeg" alt="JAMR" class="info-modal-photo">
                </span>
            </div>
        </div>

        <div class="info-modal-body">
            <p class="info-modal-description">
                {{.UI.InfoModal.Description}}
            </p>

            <div class="info-modal-tech">
                <div class="info-tech-item">
                    <iconify-icon icon="mdi:language-go" width="32" height="32"></iconify-icon>
                    <span>{{.UI.InfoModal.TechStack.GoHono}}</span>
                </div>
                <div class="info-tech-item">
                    <iconify-icon icon="mdi:lightning-bolt" width="32" height="32"></iconify-icon>
                    <span>{{.UI.InfoModal.TechStack.HTMX}}</span>
                </div>
                <div class="info-tech-item">
                    <iconify-icon icon="mdi:language-html5" width="32" height="32"></iconify-icon>
                    <span>{{.UI.InfoModal.TechStack.HTML5}}</span>
                </div>
                <div class="info-tech-item">
                    <iconify-icon icon="mdi:language-css3" width="32" height="32"></iconify-icon>
                    <span>{{.UI.InfoModal.TechStack.CSS3}}</span>
                </div>
            </div>

            <p class="info-modal-github-subtext">{{.UI.InfoModal.ViewSourceSubtext}}</p>
            <a href="https://github.com/juanatsap/cv-site" target="_blank" rel="noopener noreferrer" class="info-modal-github">
                <iconify-icon icon="mdi:github" width="24" height="24"></iconify-icon>
                <span>{{.UI.InfoModal.ViewSource}}</span>
                <iconify-icon icon="mdi:arrow-right" width="20" height="20"></iconify-icon>
            </a>
        </div>
    </div>
</dialog>
{{end}}