{% extends '@App/partials/base.html.twig' %}
{% block title %}Modèles prêts à l'emploi{% endblock %}
{% block content %}
{% include '@Dashboard/resources/_styles.html.twig' %}
<div class="body-wrapper" data-controller="resource-center" data-resource-center-favorite-url-value="{{ path('dashboard_resources_favorite_toggle') }}" data-resource-center-track-url-value="{{ path('dashboard_resources_track_action') }}">
  <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">Modèles prêts à l’emploi</h1>
        <p class="resource-subtitle mb-0">Conventions, emails, checklists et documents 1-pager prêts à adapter.</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 un modèle…">
        <select class="form-select" name="tag">
          <option value="">Tous les tags</option>
          <option value="Mécénat" {{ filters.tag|default('') == 'Mécénat' ? 'selected' : '' }}>Mécénat</option>
          <option value="Relance" {{ filters.tag|default('') == 'Relance' ? 'selected' : '' }}>Relance</option>
          <option value="Signature" {{ filters.tag|default('') == 'Signature' ? 'selected' : '' }}>Signature</option>
        </select>
        <select class="form-select" name="scope">
          <option>Tous</option>
          <option>Conventions / Contrats</option>
          <option>Emails & relances</option>
          <option>Checklists / procédures</option>
          <option>Documents 1-pager</option>
        </select>
        <button class="btn btn-success" type="submit">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 justify-content-between gap-2 mb-2">
            <div>
              <span class="resource-chip resource-chip-model">{{ item.category|capitalize }}</span>
              {% if item.is_new %}<span class="resource-chip resource-chip-new">Nouveau</span>{% endif %}
            </div>
            <button class="resource-fav-btn {{ item.code in favoriteCodes ? 'is-active' : '' }}" data-action="click->resource-center#toggleFavorite" data-code="{{ item.code }}"><i class="ti ti-heart"></i></button>
          </div>
          <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">
            <span class="badge bg-light text-dark">{{ item.level }}</span>
            <span class="badge bg-light text-dark">{{ item.duration|default('') }}</span>
            {% for tag in item.tags|default([]) %}
              <span class="badge bg-light text-secondary">{{ tag }}</span>
            {% endfor %}
          </div>
          <div class="mt-auto d-grid gap-2">
            <a class="btn btn-light border" href="{{ path('dashboard_resources_modele_show', { code: item.code }) }}">Aperçu</a>
            <button class="btn btn-success" data-action="click->resource-center#track" data-code="{{ item.code }}" data-track-action="duplicate">Dupliquer dans mon projet</button>
            <button class="btn btn-outline-success" data-action="click->resource-center#track" data-code="{{ item.code }}" data-track-action="customize">Personnaliser</button>
          </div>
        </article>
      {% else %}
        <div class="resource-empty">Aucun modèle pour ces filtres.</div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}