<%- partial('_partial/project-search-bar') %>
<div class="container bottom-spacer">
    <div class="row up-spacer">
        <div class="col-12">
            <h1 class="display-3">
                Projects
                <small class="text-muted">({{filteredProjects.length}})</small>
            </h1>
            <hr>
        </div>
    </div>
    <div class="row" v-if="view.type == 'thumbnails'">
        <div class="col-3" v-for="project in filteredProjects" style="margin-bottom: 30px;">
            <a v-bind:href="`/projects/${project.folder}`" class="thumbnail-link">
                <img class="img-fluid thumbnail thumbnail-col3 rounded" v-bind:src="project.thumbnail_image">
            </a>
        </div>
    </div>
    <div class="row projects" v-if="view.type == 'cards'">
        <div class="col-4" v-for="project in filteredProjects" style="margin-bottom: 30px;">           
            <a v-bind:href="`/projects/${project.folder}`" class="text-decoration-none">
                <div class="card project">
                    <img class="img-fluid" v-bind:src="project.thumbnail_image">
                    <div class="card-body">
                        <h5 class="card-title">{{project.title}}</h5>
                        <p>{{project.description}}</p>
                    </div>
                    <div class="card-footer text-muted">
                        <i>{{getDate(project.date)}}</i>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
<%- partial('_partial/about-author') %>
<%- partial('_partial/contact-form') %>

