{{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>
                    {{.UI.Navigation.Projects}}
                </h3>
            </summary>
        {{range .CV.Projects}}
    <div class="project-item" id="proj-{{.ProjectID}}" data-project="{{.ProjectID}}" data-title="{{if .ProjectName}}{{.ProjectName}}{{else}}{{.Title}}{{end}}">
        <div class="project-icon">
            {{if .LogoIndex}}
            <span class="icon-sprite icon-section icon-project" style="--icon-index: {{.LogoIndex}};" role="img" aria-label="{{.Title}} logo"></span>
            {{else if .ProjectLogo}}
            <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>'">
            {{else}}
            <iconify-icon icon="mdi:web" width="80" height="80" class="default-project-icon"></iconify-icon>
            {{end}}
        </div>
        <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 .GitRepoUrl}}<a href="{{.GitRepoUrl}}" target="_blank" rel="noopener noreferrer" class="github-badge"><iconify-icon icon="mdi:github" width="14" height="14"></iconify-icon>GitHub</a>{{end}}
            {{if and .OpenSource .GitRepoUrl}}<a href="{{.GitRepoUrl}}/stargazers" target="_blank" rel="noopener noreferrer" class="stars-badge" data-repo="{{githubRepo .GitRepoUrl}}"><iconify-icon icon="mdi:star" width="14" height="14"></iconify-icon>stars <span class="stars-count"></span></a>{{end}}
            {{if .MaintainedBy}}<span class="maintained-badge">{{$.UI.Sections.MaintainedBy}} {{.MaintainedBy}}</span>{{end}}
            <br>
            <small>{{if .StartDate}}{{.StartDate}}{{if .Current}}{{if .DynamicDate}} / {{.DynamicDate}}{{else}} / {{$.UI.Sections.Present}}{{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>{{$.UI.Sections.Technologies}}</strong>
                {{range $index, $tech := .Technologies}}{{if $index}}, {{end}}{{$tech}}{{end}}
            </div>
            {{end}}
        </div>
    </div>
    {{end}}

        <!-- Link to full portfolio -->
        <div class="projects-footer">
            <p>{{.UI.Portfolio.SeeAllProjects}}
            <a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer"><strong>{{.UI.Portfolio.DomestikaPortfolio}}</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}}
<script>
(function() {
  document.querySelectorAll('.stars-badge[data-repo]').forEach(function(badge) {
    var repo = badge.getAttribute('data-repo');
    if (!repo) return;
    fetch('https://api.github.com/repos/' + repo, {headers: {'Accept': 'application/vnd.github.v3+json'}})
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.stargazers_count !== undefined) {
          var el = badge.querySelector('.stars-count');
          if (el) el.textContent = data.stargazers_count;
        }
      })
      .catch(function() {});
  });
})();
</script>
{{end}}