{% extends 'layout.html' %}
{% block title %}Packages - {{ super() }}{% endblock %}
{% block content %}

{% macro installs_badge(counts) %}
  {% if counts %}
    {% set n = counts.recent_download_count %}
    {% if n >= 100000 %}
      <span class="badge badge-dark" title="Based on downloads in last 90 days">100k+ installs</span>
    {% elif n >= 50000 %}
      <span class="badge badge-primary" title="Based on downloads in last 90 days">50k+ installs</span>
    {% elif n >= 25000 %}
      <span class="badge badge-primary" title="Based on downloads in last 90 days">25k+ installs</span>
    {% elif n >= 10000 %}
      <span class="badge badge-info" title="Based on downloads in last 90 days">10k+ installs</span>
    {% elif n >= 5000 %}
      <span class="badge badge-success" title="Based on downloads in last 90 days">5k+ installs</span>
    {% elif n >= 2500 %}
      <span class="badge badge-success" title="Based on downloads in last 90 days">2.5k+ installs</span>
    {% elif n >= 1000 %}
      <span class="badge badge-secondary" title="Based on downloads in last 90 days">1k+ installs</span>
    {% endif %}
  {% endif %}
{% endmacro %}

<div id="packages">
  {% for version_row in versions | batch(3) %}
  <div class="row package-row">
    {% for version in version_row %}
    <div class="col-md-4">
      <div class="d-flex">
        <div class="flex-shrink-0 mr-3" style="width: 72px;">
          <a href="{{ url_for('frontend.package', name=version.package.name) }}">
            <img src="{{ url_for('nas.data', path=version.icons['72'].path) }}" alt="Icon">
          </a>
        </div>
        <div class="flex-grow-1">
          <h5>{{ version.displaynames['enu'].displayname }}
            <small class="text-muted">v{{ version.version_string }}</small>
          </h5>
          {{ installs_badge(version.package.download_counts) }}
          <div class="ellipsis package-description">
            <p>{{ version.builds[0].descriptions['enu'].description }}</p>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endfor %}
</div>
{% endblock %}