{% extends "base.html.j2" %} {% block content %}
  {% for user in stars.top_users %}
    <div class="card col-sm-12 col-md-6 col-lg-4">
      <div class="card-body">
        <h5 class="card-title" style="display: inline-block">
          <img src="https://github.com/{{ user.name }}.png?size=40" class="avatar" />
          <a href="{{ user.url }}">
            {{ user.name }}
          </a>
        </h5>
        <h6 class="card-subtitle text-muted" style="display: inline-block; margin-left: 5px">
          <span class="text-muted" title="followers">
            <i class="fas fa-users"></i>
            {{ user.followers }}
          </span>
        </h6>
        <p class="card-text">
          {% if user.top_repo %}
            author of
            <a href="{{ user.top_repo.url }}">
              {{ user.top_repo.name }}
            </a>
            <span class="text-muted" title="stargazers">
              <i class="fas fa-star"></i>
              {{ user.top_repo.stars }}
            </span>
          {% elif user.top_pin %}
            maintainer of
            <a href="{{ user.top_pin.url }}">
              {{ user.top_pin.name }}
            </a>
            <span class="text-muted" title="stargazers">
              <i class="fas fa-star"></i>
              {{ user.top_pin.stars }}
            </span>
          {% endif %}
        </p>
      </div>

      <div class="card-footer bg-transparent">
        {% for repo in user.stars[:3] %}
          <a href="{{ repo.url }}" class="btn btn-light" target="_blank">
            {% if repo.name == 'flakehell' %}
              <i class="fas fa-fire"></i>
            {% elif repo.name == 'textdistance' %}
              <i class="fas fa-ruler"></i>
            {% elif repo.name == 'deal' %}
              <i class="fas fa-handshake"></i>
            {% else %}
              <i class="far fa-star"></i>
            {% endif %}
            {{ repo.name }}
          </a>
        {% endfor %}
      </div>

    </div>
  {% endfor %}
{% endblock %}
