{% extends "djust_theming/catalogue/base.html" %}
{% load theme_tags theme_components djust_components %}

{% block title %}{{ category }} — Components{% endblock %}

{% block catalogue_content %}
{% theme_breadcrumb items=crumbs %}

<div class="dc-hero">
  <h1 class="dc-comp-title">{{ category }}</h1>
  <p>{{ category_components|length }} component{{ category_components|length|pluralize }} in this category.</p>
</div>

<div class="dc-grid">
  {% for comp in category_components %}
  <a href="{% url 'djust_theming:components_detail' comp.name %}" class="dc-card-link" dj-navigate="{% url 'djust_theming:components_detail' comp.name %}">
    {% card title=comp.display_name class="dc-card" %}
      <div class="dc-card-head">
        {% theme_badge comp.component_type variant=comp.component_type %}
      </div>
      {% if comp.description %}<p class="dc-card-desc">{{ comp.description }}</p>{% endif %}
      {% component_thumbnail comp.name as thumb %}{% if thumb %}<div class="dc-card-thumb" aria-hidden="true"><div>{{ thumb }}</div></div>{% endif %}
      <div class="dc-card-meta">
        {% if comp.example_count %}{{ comp.example_count }} example{{ comp.example_count|pluralize }}{% endif %}
        {% if comp.a11y_count %} · {{ comp.a11y_count }} a11y rule{{ comp.a11y_count|pluralize }}{% endif %}
      </div>
    {% endcard %}
  </a>
  {% endfor %}
</div>
{% endblock %}