{% extends '@App/partials/base.html.twig' %}
{% block title %}Fiches pratiques{% 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">Fiches pratiques</h1>
        <p class="resource-subtitle mb-0">Guides actionnables par objectif.</p>
      </div>
      <a href="{{ path('dashboard_resources_home') }}" class="btn btn-light border">Retour</a>
    </div>

    <form class="resource-card resource-card-body mb-3">
      <div class="filter-bar">
        <input class="form-control" type="search" name="q" value="{{ filters.q|default('') }}" placeholder="Rechercher une fiche…">
        <select class="form-select" name="tag">
          <option value="">Tous les objectifs</option>
          <option value="Prospection" {{ filters.tag|default('') == 'Prospection' ? 'selected' : '' }}>Prospection</option>
          <option value="Contreparties" {{ filters.tag|default('') == 'Contreparties' ? 'selected' : '' }}>Activation</option>
        </select>
        <button class="btn btn-success">Filtrer</button>
      </div>
    </form>

    <div class="model-grid">
      {% for item in items %}
        <article class="resource-card resource-card-body d-flex flex-column">
          <div class="d-flex gap-2 mb-2">
            <span class="resource-chip resource-chip-guide">Fiche pratique</span>
            <span class="badge bg-light text-dark">{{ item.level }}</span>
          </div>
          <h3 class="h5 mb-1">{{ item.title }}</h3>
          <p class="text-muted mb-2">{{ item.description }}</p>
          <div class="small text-muted mb-2">Durée estimée : {{ item.duration }}</div>
          <div class="mt-auto d-grid gap-2">
            <button class="btn btn-success">Appliquer dans FundUp</button>
            <button class="btn btn-light border">Voir la fiche</button>
          </div>
        </article>
      {% else %}
        <div class="resource-empty">Aucune fiche.</div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}