{% set contributors_data = load_data(path="data/contributors.json", format="json") %}

<div class="community-contributors" id="contributors">
  <div class="container">
    <p class="section-kicker">People</p>
    <h2 class="section-title">Contributors</h2>
    <p class="contributors-intro">
      Open Free Books is written and maintained in the open. These are the people building and reviewing the textbooks.
    </p>
    <ul class="contributors-avatar-grid" role="list" data-scroll-reveal>
      {% for person in contributors_data.contributors %}
      {% set contributor_id = person.id | default(value=person.name | slugify) %}
      <li class="contributors-avatar-item" data-scroll-reveal-card>
        <button
          type="button"
          class="contributor-avatar-btn"
          data-contributor-dialog="contributor-dialog-{{ contributor_id }}"
          aria-label="View contributions by {{ person.name }}"
          aria-haspopup="dialog"
        >
          {% if person.avatar %}
          <img
            class="contributor-avatar-img"
            src="{{ get_url(path=person.avatar) | safe }}"
            alt=""
            width="48"
            height="48"
            loading="lazy"
            decoding="async"
          />
          {% else %}
          <span class="contributor-avatar-fallback" aria-hidden="true">{{ person.name | first }}</span>
          {% endif %}
        </button>
      </li>
      {% endfor %}
    </ul>

    {% for person in contributors_data.contributors %}
    {% set contributor_id = person.id | default(value=person.name | slugify) %}
    <dialog id="contributor-dialog-{{ contributor_id }}" class="contributor-dialog">
      <form method="dialog" class="contributor-dialog-panel">
        <button type="submit" class="contributor-dialog-close" aria-label="Close">×</button>
        <div class="contributor-dialog-header">
          {% if person.avatar %}
          <img
            class="contributor-dialog-avatar"
            src="{{ get_url(path=person.avatar) | safe }}"
            alt=""
            width="80"
            height="80"
            decoding="async"
          />
          {% endif %}
          <div class="contributor-dialog-identity">
            <h3 class="contributor-dialog-name">{{ person.name }}</h3>
            {% if person.job_title %}
            <p class="contributor-dialog-job">{{ person.job_title }}</p>
            {% endif %}
          </div>
        </div>
        {% if person.education %}
        <p class="contributor-dialog-meta">
          <span class="contributor-meta-label">Education</span>
          {{ person.education }}
        </p>
        {% endif %}
        {% if person.contributions %}
        <div class="contributor-dialog-contributions">
          <span class="contributor-meta-label">Contributes</span>
          <ul class="contributor-contribution-list" role="list">
            {% for item in person.contributions %}
            <li>{{ item }}</li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
        {% if person.website or person.socials %}
        <div class="contributor-dialog-connect">
          <span class="contributor-meta-label">Connect</span>
          <ul class="contributor-social-list" role="list">
            {% if person.website %}
            <li>
              <a
                class="contributor-social-link"
                href="{{ person.website | safe }}"
                rel="noopener noreferrer"
                aria-label="Website"
              >
                {{ social::website_icon() | trim | safe }}
              </a>
            </li>
            {% endif %}
            {% if person.socials %}
            {% for link in person.socials %}
            <li>
              <a
                class="contributor-social-link"
                href="{{ social::social_href(social=link) | trim | safe }}"
                {% if link.type != "email" %}rel="noopener noreferrer"{% endif %}
                aria-label="{{ social::social_label(kind=link.type) | trim }}"
              >
                {{ social::social_icon(kind=link.type) | trim | safe }}
              </a>
            </li>
            {% endfor %}
            {% endif %}
          </ul>
        </div>
        {% endif %}
      </form>
    </dialog>
    {% endfor %}

    <p class="section-note">
      Want to contribute? Open a pull request on <a href="{{ config.extra.github_url | safe }}">GitHub</a>.
    </p>
  </div>
</div>