{% extends '@App/partials/base.html.twig' %}
{% block title %}Kits & exemples{% endblock %}
{% block content %}
{% include '@Dashboard/resources/_styles.html.twig' %}
<div class="body-wrapper">
  <div class="resource-shell">
    <div class="d-flex justify-content-between align-items-end flex-wrap gap-2 mb-3">
      <div>
        <h1 class="resource-page-title mb-1">Kits & exemples</h1>
        <p class="resource-subtitle mb-0">Des packs prêts à importer dans vos projets.</p>
      </div>
      <a href="{{ path('dashboard_resources_home') }}" class="btn btn-light border">Retour</a>
    </div>

    <div class="model-grid">
      {% for item in items %}
        <article class="resource-card resource-card-body d-flex flex-column">
          <span class="resource-chip resource-chip-model mb-2">Kit</span>
          <h3 class="h5 mb-1">{{ item.title }}</h3>
          <p class="text-muted mb-2">{{ item.description }}</p>
          <div class="d-flex gap-2 flex-wrap mb-3">
            {% for tag in item.tags|default([]) %}<span class="badge bg-light text-dark">{{ tag }}</span>{% endfor %}
          </div>
          <div class="mt-auto d-grid gap-2">
            <button class="btn btn-success">Importer dans mon projet</button>
            <button class="btn btn-light border">Voir le contenu</button>
          </div>
        </article>
      {% else %}
        <div class="resource-empty">Aucun kit.</div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}