{% extends "public_base.html" %}

{% block title %}{{ _('Team') }} — {{ SPLENT_APP }}{% endblock %}

{% block hero %}
    {{ render_block('hero', eyebrow=_('People'), title=_('Team'),
                    subtitle=_('The people behind the project.')) }}
{% endblock %}

{% block content %}
<div class="container section">
    {% for role, members in groups.items() %}
    {#- A role that stands for an organisation carries a logo, a description
        or a website; a plain role renders as the bare heading it always was. #}
    {%- if role.logo or role.description or role.link %}
    <header class="team-group">
        {% if role.logo %}
        {% if role.link %}<a class="team-group__logo-link" href="{{ role.link | safe_url }}" target="_blank" rel="noopener">{% endif %}
        <img class="team-group__logo" src="{{ role.logo | safe_url }}" alt="{{ role.name }}" loading="lazy">
        {% if role.link %}</a>{% endif %}
        {% endif %}
        <div class="team-group__body">
            <h2 class="section-title">{{ role.name }}</h2>
            {% if role.description %}<p class="team-group__description">{{ role.description }}</p>{% endif %}
            {% if role.link %}<a class="team-group__website" href="{{ role.link | safe_url }}" target="_blank" rel="noopener">{{ (role.link | safe_url).split('://')[-1].rstrip('/') }}</a>{% endif %}
        </div>
    </header>
    {%- else %}
    <h2 class="section-title">{{ role.name }}</h2>
    {%- endif %}
    <div class="member-grid">
        {% for m in members %}
        <article class="member-card">
            <a class="member-card__link" href="{{ url_for('team.detail', slug=m.slug) }}" aria-label="{{ m.name }}">
                {% if m.photo %}
                <img class="member-card__photo" src="{{ m.photo | safe_url }}" alt="{{ m.name }}" loading="lazy">
                {% else %}
                <span class="member-card__placeholder" aria-hidden="true">{{ m.name[:1] | upper }}</span>
                {% endif %}
            </a>
            <div class="member-card__overlay">
                <h3 class="member-card__name">{{ m.name }}</h3>
                {% if m.position %}<p class="member-card__role">{{ m.position }}{% if m.affiliation %} · {{ m.affiliation }}{% endif %}</p>{% endif %}
                {% if m.links or m.link or m.email %}
                <div class="member-card__links">
                    {% for l in m.links %}
                    <a href="{{ l.url | safe_url }}" target="_blank" rel="noopener">{{ l.label }}</a>
                    {% endfor %}
                    {% if m.link %}<a href="{{ m.link | safe_url }}" target="_blank" rel="noopener">{{ _('Website') }}</a>{% endif %}
                    {% if m.email %}<a href="mailto:{{ m.email }}">{{ _('Email') }}</a>{% endif %}
                </div>
                {% endif %}
            </div>
        </article>
        {% endfor %}
    </div>
    {% else %}
    <p class="card__text">{{ _('No team members yet.') }}</p>
    {% endfor %}
</div>
{% endblock %}