{{ if .Site.Params.projects.enable | default false }}
<section id="projects" class="py-5">
    <div class="container">
        <h3 class="text-center">{{ .Site.Params.projects.title | default "Projects" }}</h3>
        <div class="row justify-content-center px-3 px-md-5">
            {{ range .Site.Params.projects.items }}
            <div class="col-lg-4 col-md-6 my-3">
                <div class="card my-3 h-100" title="{{ .title }}">
                    <div class="card-head">
                        <img class="card-img-top" src="{{ .image }}" alt="{{ .title }}">
                    </div>
                    <div class="card-body bg-transparent p-3">
                        <div class="pb-2 bg-transparent">
                            {{ range .badges }}
                            <span class="badge badge-secondary">{{ . }}</span>
                            {{ end }}
                        </div>
                        <h5 class="card-title bg-transparent mt-1">{{ .title }}</h5>
                        <div class="card-text bg-transparent secondary-font">
                            {{ .content }}
                        </div>
                    </div>
                    {{ if or (.links) (.featured) }}
                    <div class="card-footer py-3">
                        {{ range .links }}
                            {{ if .icon }}
                                <span class="m-1 mx-2">
                                    <a href="{{ .url }}" target="_blank" class="btn social-icon" target="_blank">
                                    <i class="{{ .icon }}"></i>
                                </a>
                                </span>
                            {{ else if  .iconURL }}
                                <span class="px-1">
                                    <a href="{{ .url }}" target="_blank" class="btn social-icon">
                                        <img  src="{{ .iconURL }}">
                                    </a>
                                </span>
                            {{ end }} 
                        {{ end }}
                        {{ if .featured }}
                        <span class="float-end">
                            <a class="btn btn-sm" href="{{ .featured.link }}" target="_blank">
                                {{ .featured.name }}
                            </a>
                        </span>
                        {{ end }}
                    </div>
                    {{ end }}
                </div>
            </div>
            {{ end }}
            {{ range ( where .Site.RegularPages "Type" "projects" ) }}
            {{ if .Params.showInHome | default true }}
            <div class="col-lg-4 col-md-6 my-3">
                <div class="card my-3 h-100" title="{{ .Title }}">
                    <div class="card-head">
                        <img class="card-img-top" src="{{ .Params.image }}" alt="{{ .Title }}">
                    </div>
                    <div class="card-body bg-transparent p-3">
                        <div class="pb-2 bg-transparent">
                            {{ range .Params.badges }}
                            <span class="badge badge-secondary">{{ . }}</span>
                            {{ end }}
                        </div>
                        <h5 class="card-title bg-transparent">{{ .Title | truncate 50 }}</h5>
                        <div class="card-text bg-transparent secondary-font">
                            {{ .Summary | truncate 100 | safeHTML }}
                        </div>
                    </div>
                    <div class="card-footer py-3">
                        {{ range .Params.links }}
                        <span class="m-1 mx-2">
                            <a target="_blank" target="_blank" class="btn social-icon" href="{{ .url }}">
                                {{ if .icon }}
                                    <i class="{{ .icon }}"></i>
                                {{ else if  .iconURL }}
                                    <img src="{{ .iconURL }}">
                                {{ end }} 
                            </a>
                        </span>
                        {{ end }}
                        <span class="float-end">
                            <a class="btn btn-sm" href="{{ .RelPermalink }}">
                                Know more
                            </a>
                        </span>
                    </div>
                </div>
            </div>
            {{ end }}
            {{ end }}
        </div>
    </div>
</section>
{{ end }}