{% load static %}
{% for placement in placements %}
<section class="section"><div class="container">
<article class="people-map people-map--{{ placement.people_map.style }}">
  <header class="people-map-heading"><span class="people-map-eyebrow">CONNECTED ACROSS THE WORLD</span><h2>{{ placement.people_map.title }}</h2><p>{{ placement.people_map.description }}</p></header>
  <div class="people-map-scroll" tabindex="0" aria-label="World map. Scroll horizontally on small screens.">
    <div class="people-map-canvas" data-people-map>
      <img class="people-map-land{% if placement.people_map.background_style != 'classic' %} people-map-land--preset{% endif %}" src="{% if placement.people_map.background_image %}{{ placement.people_map.background_image.url }}{% else %}{% static placement.people_map.background_static_path %}{% endif %}" alt="World map" />
      <svg class="people-map-lines" aria-hidden="true"></svg>
      {% for member in placement.people_map.memberships.all %}
      <{% if placement.people_map.show_people_details %}a{% else %}span{% endif %} class="people-map-pin" {% if placement.people_map.show_people_details %}href="#map-{{ placement.pk }}-person-{{ member.pk }}"{% endif %} data-lat="{{ member.latitude|stringformat:'.6f' }}" data-lon="{{ member.longitude|stringformat:'.6f' }}" aria-label="{{ member.person.name }} — {{ member.city }} {{ member.country }}">
        {% if member.person.photo %}<img src="{{ member.person.photo.url }}" alt="" loading="lazy" />{% else %}<span class="people-map-initial">{{ member.person.name|first }}</span>{% endif %}
        <span class="people-map-label">{{ member.person.name }}</span>
      </{% if placement.people_map.show_people_details %}a{% else %}span{% endif %}>
      {% endfor %}
    </div>
  </div>
  {% if placement.people_map.show_people_details %}
  <div class="people-map-directory">
    {% for member in placement.people_map.memberships.all %}
    <article class="people-map-person" id="map-{{ placement.pk }}-person-{{ member.pk }}" tabindex="-1">
      {% if member.person.photo %}<img src="{{ member.person.photo.url }}" alt="{{ member.person.name }}" loading="lazy" />{% endif %}
      <div><h3>{{ member.person.name }}{% if member.person.qualifications %}, {{ member.person.qualifications }}{% endif %}</h3><p>{{ member.person.role }}</p><p>{{ member.person.institution }}</p><small>{{ member.city }}{% if member.city and member.country %}, {% endif %}{{ member.country }}</small>
      {% if member.person.biography %}<p>{{ member.person.biography|linebreaksbr }}</p>{% endif %}
      {% if member.person.profile_url %}<a href="{{ member.person.profile_url }}" rel="noopener noreferrer">View profile ↗</a>{% endif %}</div>
    </article>
    {% endfor %}
  </div>
  {% endif %}
</article></div></section>
{% endfor %}