{% extends "public_base.html" %}

{% block title %}{{ member.name }} — {{ site.name }}{% endblock %}

{% block hero %}
    {{ render_block('hero', eyebrow=member.position, title=member.name, subtitle=member.affiliation) }}
{% endblock %}

{% block content %}
<article class="container section member-detail">
    {% if member.photo %}
    <img class="member-detail__photo" src="{{ member.photo }}" alt="{{ member.name }}" data-lightbox>
    {% endif %}

    {% if member.roles %}
    <div class="member-roles">
        {% for role in member.roles %}
        <span class="badge">{{ role.name }}</span>
        {% endfor %}
    </div>
    {% endif %}

    {% if member.bio %}<div class="prose">{{ member.bio | safe }}</div>{% endif %}

    {% if member.links %}
    <h2 class="section-title">{{ _('Profiles &amp; contact') }}</h2>
    <div class="member-links">
        {% for l in member.links %}
        <a class="btn btn-ghost" href="{{ l.url }}" target="_blank" rel="noopener">{{ l.label }}</a>
        {% endfor %}
    </div>
    {% elif member.email %}
    <p class="member-contact">
        <svg class="member-contact__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>
        </svg>
        <span class="member-contact__label">{{ _('Email') }}</span>
        <a href="mailto:{{ member.email }}">{{ member.email }}</a>
    </p>
    {% endif %}

    <p><a class="member-detail__back" href="{{ url_for('team.index') }}">← {{ _('Back to team') }}</a></p>
</article>
{% endblock %}