{%- if page.contributors and page.contributors.size != 0 %}
<span class="d-block h2-like fs-2">Contributors</span>
<div class="p-4 rounded mt-4 page-contributors d-flex flex-wrap gap-2">
    {%- assign contributors = site.data.CONTRIBUTORS %}
    {%- assign page_contributors = page.contributors | sort %}
    {%- for contributor in page_contributors %}
    {%- assign id = contributors[contributor].git | default: 'no_github' %}
    <div class="dropup-center dropup d-inline-block">
      <button class="btn btn-sm dropdown-toggle contributor-link d-flex gap-2 align-items-center hover-primary position-relative"  type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" data-bs-offset="0,10">
          <div>
            {%- if contributors[contributor].image_url %}
            <img class="img-fluid rounded-circle contributor-img-sm" src="{{ contributors[contributor].image_url }}" alt="Avatar of the contributor {{ contributor }}">
            {%- else %}
            {%- if contributors[contributor].git %}
            <img class="img-fluid rounded-circle contributor-img-sm" src="https://avatars.githubusercontent.com/{{ id }}" alt="Avatar of the contributor {{ contributor }}">
            {%- else %}
            <div class="contr-placeholder rounded-circle d-flex justify-content-center align-items-center contributor-img-sm">
              {%- assign contr_name = contributor | split: " " %}
              {%- assign initials = "" %}
              {%- for name in contr_name %}
                  {%- assign initial = name | slice: 0,1 | capitalize %}
                  {%- assign initials = initials | append: initial %}
              {%- endfor %}
              <span class="fw-bold">{{ initials }}</span>
            </div>
            {%- endif %}
            {%- endif %}
          </div>
          <div>
              {{ contributor }}
          </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">
              <a data-bs-toggle="tooltip" data-bs-original-title="Coordinator of the {{page.title}} page.">
                <i class="fa-solid fa-crown"></i>
              </a>  
            </div>
        </div>
        {%- endif %}
        {%- endfor %}
        {%- endif %}
      </button>
        <div class="dropdown-menu shadow p-0 border-0 contributor-cards">

          <div class="card">
              {%- assign id = contributors[contributor].git | default: 'no_github' %}
              <div class="position-relative">
                {%- if contributors[contributor].image_url %}
                <img src="{{ contributors[contributor].image_url }}" class="card-img-top p-3 rounded-circle" alt="{{ contributor }}">
                {%- else %}
                {%- if contributors[contributor].git %}
                <img src="https://avatars.githubusercontent.com/{{id}}" class="card-img-top p-3 rounded-circle" alt="{{ contributor }}">
                {%- else %}
                <div class="p-3">
                  <div class="ratio ratio-1x1">
                    <div class="contr-placeholder rounded-circle d-flex justify-content-center align-items-center">
                      {%- assign contr_name = contributor | split: " " %}
                      {%- assign initials = "" %}
                      {%- for name in contr_name %}
                          {%- assign initial = name | slice: 0,1 | capitalize %}
                          {%- assign initials = initials | append: initial %}
                      {%- endfor %}
                      <span class="fs-2 fw-bold">{{ initials }}</span>
                    </div>
                  </div>
                </div>
                {%- endif %}
                {%- 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 }}</p>
                {%- endif %}
              </div>
              {%- if contributors[contributor].git or contributors[contributor].email or contributors[contributor].orcid %}
              <div class="card-footer">
                <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>
        </div>
      </div>{%- endfor %}
</div>
{%- endif %}