{%- if page.contributors and page.contributors.size != 0 %}
<span class="d-block h2-like fs-2 text-dark">Contributors</span>
<div class="p-4 rounded mt-4 page-contributors">
    {%- assign contributors = site.data.CONTRIBUTORS %}
    {%- assign page_contributors = page.contributors | sort %}
    {%- for contributor in page_contributors %}
    {%- assign id = contributors[contributor].git | default: 'no_github' %}
    {%- capture html_code %}
    {%- assign stripped_name = contributor | replace: "'", "’" %}
    <div class="card bg-white">
        {%- assign id = contributors[contributor].git | default: 'no_github' %}
        <div class="position-relative d-flex justify-content-center">
          {%- if contributors[contributor].image_url %}
          <img src="{{ contributors[contributor].image_url }}" class="card-img-top p-3 rounded-circle contributor-img" alt="{{ stripped_name }}">
          {%- else %}
          <img src="https://avatars.githubusercontent.com/{{id}}" class="card-img-top p-3 rounded-circle contributor-img" alt="{{ stripped_name }}">
          {%- endif %}
          {%- if contributors[contributor].role %}
          <span class="badge position-absolute top-0 end-0">{{ contributors[contributor].role | capitalize }}</span>
          {%- endif %}
        </div>
        <div class="card-body text-center py-0">
          <p class="card-title">{{ stripped_name }}</p>
          {%- if contributors[contributor].affiliation %}
          <p class="card-affiliation">{{ contributors[contributor].affiliation | replace: "'", "’" }}</p>
          {%- endif %}
        </div>
        {%- if contributors[contributor].git or contributors[contributor].email or contributors[contributor].orcid %}
        <div class="card-footer bg-dark">
          <div class="d-flex justify-content-center">
            {%- if contributors[contributor].git %}
            <div class="mx-1"><a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="https://github.com/{{id}}"><i class="fa-brands fa-github"></i></a></div>
            {%- endif %}
            {%- if contributors[contributor].email %}
            <div class="mx-1"><a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="mailto:{{contributors[contributor].email}}"><i class="fa-solid fa-envelope"></i></a></div>
            {%- endif %}
            {%- if contributors[contributor].orcid %}
            <div class="mx-1"><a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="https://orcid.org/{{contributors[contributor].orcid}}"><i class="fa-brands fa-orcid"></i></a></div>
            {%- endif %}
          </div>
        </div>
        {%- endif %}
      </div>
    {%- endcapture %}
    <a tabindex="0" role="button" class="btn btn-sm contributor-link hover-primary m-1 position-relative" data-bs-html="true" data-bs-trigger="focus" data-bs-container="body" data-bs-template='<div class="popover shadow border-0 contributor-cards" role="tooltip"><div class="popover-body p-0"></div></div>' data-bs-toggle="popover" data-bs-placement="top" data-bs-content='{{html_code}}'>
        <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
                {%- if contributors[contributor].image_url %}
                <img class="img-fluid rounded-circle contributor-img-sm" src="{{ contributors[contributor].image_url }}" alt="Avatar of the contributor {{ stripped_name }}">
                {%- else %}
                <img class="img-fluid rounded-circle contributor-img-sm" src="https://avatars.githubusercontent.com/{{ id }}" alt="Avatar of the contributor {{ stripped_name }}">
                {%- endif %}
            </div>
            <div class="flex-grow-1 ms-2">
                {{ contributor }}
            </div>
        </div>
        {%- if page.coordinators %}
        {%- for coordinator in page.coordinators %}
        {%- if coordinator == contributor %}
        <div class="position-absolute top-0 start-100 translate-middle">
            <div class="rounded-circle coordinator-crown">
                <i class="fa-solid fa-crown"></i>
            </div>
        </div>
        {%- endif %}
        {%- endfor %}
        {%- endif %}
    </a>{%- endfor %}
</div>
{%- endif %}