{% comment %}
This partial template contains the content structure for each project card.
Vertical card layout with image on top, inspired by ozamram.github.io
{% endcomment %}

<a href="#" class="project-card-link" onclick="showProjectDialog('{{ project.title | slugify }}', event)">
    {% if project.image %}
    <div class="project-card-image">
        <img src="{{ project.image }}"
            alt="{{ project.title | strip_html }}"
            loading="lazy">
    </div>
    {% else %}
    <div class="project-card-image project-card-image-placeholder">
        <i class="fas fa-flask"></i>
    </div>
    {% endif %}

    <div class="project-card-body">
        <h3 class="project-card-title">
            {{ project.title | markdownify | remove: '<p>' | remove: '</p>' }}
        </h3>

        <p class="project-card-description">
            {{ project.description | strip_html | truncate: 150 }}
        </p>

        {% if project.tags %}
        <div class="project-card-tags">
            {% for tag in project.tags %}
            <span class="project-tag">{{ tag }}</span>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</a>

{% if project.links %}
<div class="project-card-footer">
    {% for link in project.links %}
    <a href="{{ link.url }}"
       class="project-footer-link"
       target="_blank"
       rel="noopener noreferrer"
       onclick="event.stopPropagation();">
        {% case link.type %}
        {% when 'paper' %}
        <i class="fas fa-file-pdf"></i>
        {% when 'talk' %}
        <i class="fas fa-chalkboard-teacher"></i>
        {% when 'code' %}
        <i class="fab fa-github"></i>
        {% when 'link' %}
        <i class="fas fa-external-link-alt"></i>
        {% when 'news' %}
        <i class="fas fa-newspaper"></i>
        {% endcase %}
        {{ link.text }}
    </a>
    {% endfor %}
</div>
{% endif %}

{% comment %}
Add some error handling for missing content
{% endcomment %}
{% unless project.title and project.description %}
  <div class="project-error" hidden>
    <p>Error: Missing required project information.</p>
  </div>
{% endunless %}

{% comment %}
Add schema.org metadata for better SEO
{% endcomment %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "ResearchProject",
"name": "{{ project.title }}",
"description": "{{ project.description }}",
"author": {
"@type": "Person",
"name": "{{ site.author.name }}",
"affiliation": {
    "@type": "Organization",
    "name": "{{ site.author.institution }}"
}
},
{% if project.Paper %}
"publication": {
"@type": "ScholarlyArticle",
"url": "{{ project.Paper }}"
},
{% endif %}
"keywords": {{ project.tags | jsonify }}
}
</script>