{{define "section-experience"}}
<!-- Experience -->
<section id="experience" class="cv-section component-wrapper">
    <!-- Actual Content -->
    <div class="actual-content">
        <details open>
            <summary>
                <h3 class="section-title">
                    <iconify-icon icon="mdi:office-building" width="24" height="24" class="section-icon"></iconify-icon>
                    {{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}
                </h3>
            </summary>

        {{range .CV.Experience}}
        <div class="experience-item">
            <div class="company-logo">
                {{if .CompanyLogo}}
                <img src="/static/images/companies/{{.CompanyLogo}}" alt="{{.Company}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:office-building\' width=\'80\' height=\'80\' class=\'default-company-icon\'></iconify-icon>'">
                {{else}}
                <iconify-icon icon="mdi:office-building" width="80" height="80" class="default-company-icon"></iconify-icon>
                {{end}}
            </div>
            <div class="experience-content">
                <strong>{{.Position}}{{if .Company}} - {{if .CompanyURL}}<a href="{{.CompanyURL}}" target="_blank" rel="noopener noreferrer">{{.Company}}</a>{{else}}{{.Company}}{{end}}{{if .Duration}} - <span class="duration-text">{{.Duration}}</span>{{end}}{{end}}</strong>
                {{if .Current}}<span class="current-badge">{{if eq $.Lang "es"}}ACTUAL{{else}}CURRENT{{end}}</span>{{end}}
                {{if .Expired}}<span class="expired-badge">{{if eq $.Lang "es"}}EXPIRADO{{else}}EXPIRED{{end}}</span>{{end}}
                <br>
                <small>{{.StartDate}} / {{if .Current}}{{if eq $.Lang "es"}}presente{{else}}now{{end}}{{else}}{{.EndDate}}{{end}} - ({{.Location}})</small>

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

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

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

            <!-- Experience Item 1 - Full structure -->
            <div class="skeleton-experience-item">
                <div class="skeleton skeleton-company-logo"></div>
                <div class="skeleton-experience-content">
                    <div class="skeleton skeleton-position-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: 95%;"></div>
                    <div class="skeleton skeleton-responsibility-line" style="width: 90%;"></div>
                </div>
            </div>

            <!-- Experience Item 2 - Full structure -->
            <div class="skeleton-experience-item">
                <div class="skeleton skeleton-company-logo"></div>
                <div class="skeleton-experience-content">
                    <div class="skeleton skeleton-position-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: 92%;"></div>
                </div>
            </div>

            <!-- Experience Item 3 - Shorter -->
            <div class="skeleton-experience-item">
                <div class="skeleton skeleton-company-logo"></div>
                <div class="skeleton-experience-content">
                    <div class="skeleton skeleton-position-line"></div>
                    <div class="skeleton skeleton-date-line"></div>
                    <div class="skeleton skeleton-description-line" style="width: 85%;"></div>
                </div>
            </div>
        </div>
    </div>
</section>
{{end}}