{{ with .Site.GetPage "section" "/projects" }}
<div class="section" id="{{ .Title | urlize }}">
    <!-- Begin Projects container -->
    <div class="container">
        <h2 class="title is-2 has-text-centered">
            {{ .Title }}
        </h2>
        <div class="section">
            <div class="columns is-multiline">
                {{ $totalProjects := (len .Pages) }}
                {{ $numberOfProjectsToShow := .Site.Params.home.numberOfProjectsToShow | default $totalProjects }}
                {{ range $index, $element := .Pages.ByWeight | first $numberOfProjectsToShow }}
                {{ if .Site.Params.projects.useTwoColumns }}
                {{ .Scratch.Set "width" "490x" }}
                <div class="column is-half">
                {{ else }}
                {{ .Scratch.Set "width" "302x" }}
                <div class="column is-one-third">
                {{ end }}
                    <div class="card" data-target="#project-{{ $index }}">
                        <div class="card-image">
                            <figure class="image is-3by2">
                                <a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}>
                                    {{ $width := ( .Scratch.Get "width" ) }}
                                    {{ with .Resources.ByType "image" }}
                                    {{ range first 1 (sort . "Params.weight") }}
                                    {{ $image := .Resize $width }}
                                    <img src="{{ $image.Permalink }}" alt ="{{ $image.Name }}">
                                    {{ end }}
                                    {{ end }}
                                </a>
                            </figure>
                        </div>
                        <div class="card-content has-text-centered top-pad">
                            <a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}>
                                {{ .Params.external_link }}
                                {{ .Title }}
                            </a>
                        </div>
                    </div>
                </div>
                {{ end }}
            </div>
        </div>
        {{ if lt $numberOfProjectsToShow $totalProjects }}
        <div class="container has-text-centered top-pad">
            <a href="{{ .Permalink }}">{{ i18n "index_projects_allProjects" . }}</a>
        </div>
        {{ end }}
    </div>
    <!-- End Projects container -->
    <!-- Projects modals -->
    {{ range $index, $element := .Pages.ByWeight | first $numberOfProjectsToShow }}
    {{ if not .Params.external_link }}
    <div class="modal" id="project-{{ $index }}">
        <div class="modal-background"></div>
        <div class="modal-card">
            {{ with .Title }}
            <header class="modal-card-header bottom-pad">
                <p class="modal-card-title has-text-centered">{{ . }}</p>
            </header>
            {{ end }}

            {{ with .Resources.ByType "image" }}
            {{ $moreThenOneImage := gt (len .) 1 }}
            {{ if $moreThenOneImage }}
            <div class="owl-carousel owl-theme">
            {{ end }}
                {{ range sort . "Params.weight" }}
                    {{ $image := .Resize "640x" }}
                    {{ if $moreThenOneImage }}
                    <div class="item owl-height">
                    {{ end }}
                        <img src="{{ $image.Permalink }}" class="img-responsive" alt="{{ $image.Name }}">
                    {{ if $moreThenOneImage }}
                    </div>
                    {{ end }}
                {{ end }}
            {{ if $moreThenOneImage }}
            </div>
            {{ end }}
            {{ end }}

            {{ with .Content }}
            <section class="modal-card-body markdown">
                {{ . }}
            </section>
            {{ end }}
        </div>
        <button class="modal-close is-large" aria-label="close" data-target="#project-{{ $index }}"></button>
    </div>
    {{ end }}
    {{ end }}
    {{ partial "top-icon.html" . }}
</div>
<!-- End Projects section -->
<div class="container"><hr></div>
{{ end }}