{% extends "public_base.html" %}

{% block title %}Projects — {{ SPLENT_APP }}{% endblock %}

{% block head %}
<style>
    /* Uniform media box so badges and titles align across cards in a row,
       regardless of each project logo's intrinsic size. Rendered for every
       card, logo or not, so rows without images line up too. */
    .projects-card__media {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .75rem;
        margin-bottom: .75rem;
    }
    .projects-card__media img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: var(--brand-radius);
    }
</style>
{% endblock %}

{% block hero %}
    {{ render_block('hero', eyebrow=_('Research'), title=_('Projects'),
                    subtitle=_('Funded research projects, active and past.')) }}
{% endblock %}

{% set status_labels = {'active': _('Active'), 'past': _('Past')} %}

{% block content %}
<div class="container section">
    {% for status in ['active', 'past'] %}
    {% set items = grouped.get(status, []) %}
    {% if items %}
    <h2 class="section-title">{{ status_labels[status] }}</h2>
    <div class="card-grid">
        {% for p in items %}
        <a class="card" href="{{ url_for('projects.detail', slug=p.slug) }}">
            <div class="projects-card__media">
                {% if p.image %}<img src="{{ p.image }}" alt="">{% endif %}
            </div>
            <span class="badge">{{ p.status }}</span>
            <h3 class="card__title">{{ p.acronym or p.title }}</h3>
            {% if p.summary %}<p class="card__text">{{ p.summary }}</p>{% endif %}
            {% if p.programme or p.funding_agency %}
            <p class="card__meta">{{ p.programme or p.funding_agency }}</p>
            {% endif %}
        </a>
        {% endfor %}
    </div>
    {% endif %}
    {% else %}
    <p class="card__text">{{ _('No projects yet.') }}</p>
    {% endfor %}
</div>
{% endblock %}