<ul class="mi-people">
  {% for person in (people | objectToArray) %}
    <li class="mi-person">
      <h1 class="mi-person--name">
        {{ person.name }}
        <span class="mi-person--pronoun">({{ person.pronouns }})</span>
      </h1>
      <p class="mi-person--role">{{ person.role }}</p>
      <details>
        <summary class="mi-person--contact-toggle">Contact</summary>
        <table class="mi-person--contact-options">
          {% for contactOption in person.contactOptions %}
            <tr class="mi-person--contact-option">
              <td class="mi-person--contact-option-name">{{ contactOption.name }}:<td>
              <td>
                {% if contactOption.link %}
                  <a href="{{ contactOption.link }}">{{ contactOption.value }}</a>
                {% else %}
                  {{ contactOption.value }}
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </table>
      </details>
    </li>
  {% endfor %}
</ul>
