{% extends "base.html" %}

{% block title %}Data for the {{suite}} suite{% endblock %}

{% block header_content %}
<a class="backlink" href="../">⇦ |</a>
<span>AppStream data for {{project_name}}/{{suite}}</span>
{% endblock %}

{% block float_right %}
<small>Last updated on: {{time}}</small>
{% endblock %}

{% block content %}
<h1>Select an archive section in "{{suite}}"</h1>

<br/>

<ul class="stat-tiles">
{% for section in sections %}
  <li class="stat-tile">
    <h3 class="stat-tile-label"><a href="{{section.section}}/">{{section.section}}</a></h3>

    <div class="stat-tile-figure">
      <p class="stat-tile-count">
        <span class="stat-tile-value">{% if existsIn(section, "metainfo_count") %}{{section.metainfo_count}}{% else %}–{% endif %}</span>
        valid components
      </p>
      {% if existsIn(section, "sparkline") %}{{section.sparkline}}{% endif %}
    </div>

    {% if existsIn(section, "health") and section.health.total > 0 %}
      <div class="healthbar" role="img"
           aria-label="{% for seg in section.health.segments %}{{seg.count}} {{seg.label}}{% if not loop.is_last %}, {% endif %}{% endfor %}">
        {% for seg in section.health.segments %}
          <div class="healthbar-segment healthbar-segment-{{seg.key}}" style="width: {{round(seg.percentage, 1)}}%"></div>
        {% endfor %}
      </div>
      <ul class="healthbar-legend">
        {% for seg in section.health.segments %}
          <li><span class="swatch healthbar-segment-{{seg.key}}"></span>{{seg.label}} <span class="count">{{seg.count}}</span></li>
        {% endfor %}
      </ul>
    {% endif %}
  </li>
{% endfor %}
</ul>
{% endblock %}