{{define "section-languages"}}
<!-- Languages Section -->
<section id="languages" class="cv-section component-wrapper">
    <!-- Actual Content -->
    <div class="actual-content">
        <details open>
            <summary>
                <h3 class="section-title">
                    <iconify-icon icon="mdi:translate" width="24" height="24" class="section-icon"></iconify-icon>
                    {{.UI.Navigation.Languages}}
                </h3>
            </summary>
        {{range .CV.Languages}}
        <div class="language-item">
            <strong>{{.Language}}:</strong> {{.Proficiency}}{{if .Detail}} {{.Detail}}{{end}}
        </div>
        {{end}}
        </details>
    </div>

    <!-- Skeleton Content -->
    <div class="skeleton-content">
        <div class="skeleton-section">
            <div class="skeleton skeleton-section-title"></div>
            <div class="skeleton skeleton-language-item"></div>
            <div class="skeleton skeleton-language-item" style="width: 85%;"></div>
            <div class="skeleton skeleton-language-item" style="width: 90%;"></div>
        </div>
    </div>
</section>
{{end}}