{{define "section-courses"}}
<!-- Courses Section -->
{{if .CV.Courses}}
<section id="courses" class="cv-section component-wrapper">
    <!-- Actual Content -->
    <div class="actual-content">
        <details open>
            <summary>
                <h3 class="section-title">
                    <iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
                    {{.UI.Navigation.Courses}}
                </h3>
            </summary>
        {{range .CV.Courses}}
        <div class="course-item" id="course-{{.CourseID}}" data-course="{{.CourseID}}" data-title="{{.Title}}" data-institution="{{.Institution}}">
            <div class="course-icon">
                {{if .LogoIndex}}
                <span class="icon-sprite icon-section icon-course" style="--icon-index: {{.LogoIndex}};" role="img" aria-label="{{.Title}} logo"></span>
                {{else if .CourseLogo}}
                <img src="/static/images/courses/{{.CourseLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:school\' width=\'80\' height=\'80\' class=\'default-course-icon\'></iconify-icon>'">
                {{else}}
                <iconify-icon icon="mdi:school" width="80" height="80" class="default-course-icon"></iconify-icon>
                {{end}}
            </div>
            <div class="course-content">
                <strong>{{.Title}}</strong><br>
                <small>{{.Institution}} - {{.Date}} - ({{.Location}})</small>

                {{if .ShortDescription}}
                <p class="course-desc short-desc">{{.ShortDescription}}</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>

            <!-- Course Item 1 - With description and responsibilities -->
            <div class="skeleton-course-item">
                <div class="skeleton skeleton-course-icon"></div>
                <div class="skeleton-course-content">
                    <div class="skeleton skeleton-course-title-line"></div>
                    <div class="skeleton skeleton-course-info-line"></div>
                    <div class="skeleton skeleton-description-line"></div>
                    <div class="skeleton skeleton-responsibility-line"></div>
                    <div class="skeleton skeleton-responsibility-line" style="width: 94%;"></div>
                </div>
            </div>

            <!-- Course Item 2 - Shorter -->
            <div class="skeleton-course-item">
                <div class="skeleton skeleton-course-icon"></div>
                <div class="skeleton-course-content">
                    <div class="skeleton skeleton-course-title-line"></div>
                    <div class="skeleton skeleton-course-info-line"></div>
                    <div class="skeleton skeleton-description-line" style="width: 85%;"></div>
                </div>
            </div>

            <!-- Course Item 3 -->
            <div class="skeleton-course-item">
                <div class="skeleton skeleton-course-icon"></div>
                <div class="skeleton-course-content">
                    <div class="skeleton skeleton-course-title-line"></div>
                    <div class="skeleton skeleton-course-info-line"></div>
                </div>
            </div>
        </div>
    </div>
</section>
{{end}}
{{end}}