{{define "section-projects"}}
<!-- Projects Section -->
{{if .CV.Projects}}
<section id="projects" class="cv-section component-wrapper">
    <!-- Actual Content -->
    <div class="actual-content">
        <details open>
            <summary>
                <h3 class="section-title">
                    <iconify-icon icon="mdi:web" width="24" height="24" class="section-icon"></iconify-icon>
                    {{if eq .Lang "es"}}Proyectos Personales / Freelance{{else}}Personal / Freelance Projects{{end}}
                </h3>
            </summary>
        {{range .CV.Projects}}
    <div class="project-item">
        {{if .ProjectLogo}}
        <div class="project-icon">
            <img src="/static/images/projects/{{.ProjectLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:web\' width=\'80\' height=\'80\' class=\'default-project-icon\'></iconify-icon>'">
        </div>
        {{else}}
        <div class="project-icon">
            <iconify-icon icon="mdi:web" width="80" height="80" class="default-project-icon"></iconify-icon>
        </div>
        {{end}}
        <div class="project-content">
            <strong>
                {{if .ProjectName}}
                    {{if .URL}}<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.ProjectName}}</a>{{else}}{{.ProjectName}}{{end}}{{if .ProjectDesc}} - {{.ProjectDesc}}{{end}}
                {{else}}
                    {{if .URL}}<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.Title}}</a>{{else}}{{.Title}}{{end}}
                {{end}}
            </strong>
            {{if .Current}}<span class="live-badge"><iconify-icon icon="mdi:wifi" width="14" height="14"></iconify-icon>LIVE</span>{{end}}
            {{if .MaintainedBy}}<span class="maintained-badge">{{if eq $.Lang "es"}}MANTENIDO POR{{else}}MAINTAINED BY{{end}} {{.MaintainedBy}}</span>{{end}}
            <br>
            <small>{{if .StartDate}}{{.StartDate}}{{if .Current}}{{if .DynamicDate}} / {{.DynamicDate}}{{else}} / {{if eq $.Lang "es"}}presente{{else}}ahora{{end}}{{end}}{{end}}{{end}} - ({{.Location}})</small>

            {{if .ShortDescription}}
            <p class="project-desc short-desc">{{.ShortDescription | safeHTML}}</p>
            {{end}}

            {{if .Responsibilities}}
            <ul class="responsibilities long-only">
                {{range .Responsibilities}}
                <li>{{. | safeHTML}}</li>
                {{end}}
            </ul>
            {{end}}

            {{if .Technologies}}
            <div class="project-technologies long-only">
                <strong>{{if eq $.Lang "es"}}Tecnologías:{{else}}Technologies:{{end}}</strong>
                {{range $index, $tech := .Technologies}}{{if $index}}, {{end}}{{$tech}}{{end}}
            </div>
            {{end}}
        </div>
    </div>
    {{end}}

        <!-- Link to full portfolio -->
        <div class="projects-footer">
            <p>{{if eq .Lang "es"}}Ver todos los proyectos en mi{{else}}See all projects on my{{end}}
            <a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer"><strong>{{if eq .Lang "es"}}portfolio de Domestika{{else}}Domestika portfolio{{end}}</strong></a></p>
        </div>
        </details>
    </div>

    <!-- Skeleton Content -->
    <div class="skeleton-content">
        <div class="skeleton-section">
            <div class="skeleton skeleton-section-title"></div>

            <!-- Project Item 1 - With responsibilities and technologies -->
            <div class="skeleton-project-item">
                <div class="skeleton skeleton-project-icon"></div>
                <div class="skeleton-project-content">
                    <div class="skeleton skeleton-project-title-line"></div>
                    <div class="skeleton skeleton-date-line"></div>
                    <div class="skeleton skeleton-description-line"></div>
                    <div class="skeleton skeleton-responsibility-line"></div>
                    <div class="skeleton skeleton-responsibility-line" style="width: 93%;"></div>
                    <div class="skeleton skeleton-tech-line"></div>
                </div>
            </div>

            <!-- Project Item 2 - Shorter -->
            <div class="skeleton-project-item">
                <div class="skeleton skeleton-project-icon"></div>
                <div class="skeleton-project-content">
                    <div class="skeleton skeleton-project-title-line"></div>
                    <div class="skeleton skeleton-date-line"></div>
                    <div class="skeleton skeleton-description-line" style="width: 88%;"></div>
                    <div class="skeleton skeleton-tech-line"></div>
                </div>
            </div>

            <!-- Projects footer -->
            <div class="skeleton skeleton-footer-line"></div>
        </div>
    </div>
</section>
{{end}}
{{end}}