{% extends '@App/partials/base.html.twig' %}
{% block title %}{{ item.title }}{% endblock %}

{% block content %}
{% include '@Dashboard/resources/_styles.html.twig' %}
<style>
  .modele-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1rem}
  .modele-hero{padding:1.2rem}
  .modele-hero-icon{width:64px;height:64px;border-radius:12px;background:#dbeafe;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:1.65rem}
  .modele-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}
  .modele-metric{border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc;padding:.6rem .5rem;text-align:center}
  .modele-metric .v{font-size:2rem;font-weight:800;line-height:1.05;color:#0f172a}
  .modele-metric .l{font-size:.82rem;color:#64748b}
  .modele-preview-wrap{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;padding:1.1rem}
  .modele-paper{max-width:100%;margin:0 auto;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1.5rem 1.7rem;min-height:620px}
  .modele-paper h1,.modele-paper h2,.modele-paper h3{color:#111827}
  .modele-paper p{color:#374151;font-size:.97rem}
  .modele-paper ul{color:#374151}
  .modele-side-title{font-weight:800;font-size:1.85rem;color:#111827}
  .modele-mini-item{border:1px solid #e5e7eb;border-radius:10px;padding:.8rem;display:flex;align-items:center;gap:.7rem;background:#fff}
  .modele-mini-item .ic{width:38px;height:38px;border-radius:8px;background:#dbeafe;color:#2563eb;display:flex;align-items:center;justify-content:center}
  .modele-checks .row-item{border:1px solid #e5e7eb;border-radius:10px;padding:.9rem 1rem;display:flex;gap:.7rem;align-items:flex-start;background:#fff}
  .modele-checks .row-item i{color:#16a34a;margin-top:.2rem}
  .modele-reviews .review{padding:1rem 0;border-top:1px solid #e5e7eb}
  .modele-reviews .review:first-child{border-top:0;padding-top:.3rem}
  .modele-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}
  .modele-share-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
  @media (max-width: 1100px){.modele-layout{grid-template-columns:1fr}.modele-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width: 992px){.modele-actions{grid-template-columns:1fr 1fr}}
  @media (max-width: 576px){.modele-actions{grid-template-columns:1fr}}
</style>

<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="modele-layout">
      <div>
        <div class="resource-card modele-hero mb-3">
          <div class="d-flex gap-3 align-items-start justify-content-between mb-3">
            <div class="d-flex gap-3">
              <div class="modele-hero-icon"><i class="ti ti-file-description"></i></div>
              <div>
                <h1 class="modele-side-title mb-1">{{ item.title }}</h1>
                <p class="resource-subtitle mb-2">{{ item.description }}</p>
                <div class="d-flex flex-wrap gap-2">
                  <span class="resource-chip resource-chip-model">{{ (item.document_type ?: 'modèle')|replace({'_':' '})|title }}</span>
                  {% for tag in item.tags|default([]) %}
                    <span class="resource-chip resource-chip-guide">{{ tag }}</span>
                  {% endfor %}
                  <span class="resource-chip" style="background:#f1f5f9;color:#334155">{{ item.level ?: 'Débutant' }}</span>
                  {% if item.requires_legal_validation %}
                    <span class="resource-chip" style="background:#ffedd5;color:#9a3412">Conforme 2024</span>
                  {% endif %}
                </div>
              </div>
            </div>
            <button class="resource-fav-btn {{ item.code in favoriteCodes|default([]) ? 'is-active' : '' }} fs-6" data-action="click->resource-center#toggleFavorite" data-code="{{ item.code }}" title="Ajouter aux favoris">
              <i class="ti ti-heart"></i>
            </button>
          </div>

          <div class="modele-metrics mb-3">
            <div class="modele-metric"><div class="v">{{ item.usages_count|default(0) }}</div><div class="l">Utilisations</div></div>
            <div class="modele-metric"><div class="v">{{ item.favorites_count|default(0) }}</div><div class="l">Favoris</div></div>
            <div class="modele-metric"><div class="v">{{ item.attachments is defined ? item.attachments|length : 0 }}</div><div class="l">Pièces jointes</div></div>
            <div class="modele-metric"><div class="v text-success">{{ item.requires_legal_validation ? '100%' : '—' }}</div><div class="l">Conformité</div></div>
          </div>

          <div class="modele-actions">
            <button class="btn btn-success btn-lg" data-action="click->resource-center#track" data-code="{{ item.code }}" data-track-action="download"><i class="ti ti-download me-1"></i>Télécharger le modèle</button>
            <button class="btn btn-primary btn-lg" type="button" data-bs-toggle="modal" data-bs-target="#useResourceModelModal"><i class="ti ti-copy me-1"></i>Utiliser le modèle</button>
            <button class="btn btn-light border-success text-success btn-lg" data-action="click->resource-center#track" data-code="{{ item.code }}" data-track-action="customize"><i class="ti ti-pencil me-1"></i>Personnaliser</button>
          </div>
        </div>

        <div class="resource-card mb-3">
          <div class="resource-card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h3 class="h4 mb-0 fw-bold">Aperçu du document</h3>
              <div class="d-flex gap-2 text-muted">
                <i class="ti ti-zoom-in"></i>
                <i class="ti ti-zoom-out"></i>
                <i class="ti ti-arrows-maximize"></i>
              </div>
            </div>
            <div class="modele-preview-wrap">
              <div class="modele-paper">
                {% if previewContentHtml is defined and previewContentHtml %}
                  {{ previewContentHtml|raw }}
                {% else %}
                  <h2 class="text-center mb-4">{{ item.title|upper }}</h2>
                  <p>{{ item.description }}</p>
                  <p class="mb-0">Aucun contenu enrichi n'a encore été saisi pour ce modèle.</p>
                {% endif %}
                
              </div>
            </div>
          </div>
        </div>

        <div class="resource-card mb-3">
          <div class="resource-card-body">
            <h3 class="h4 fw-bold mb-3">Contenu du modèle</h3>
            <div class="modele-checks d-grid gap-2">
              <div class="row-item"><i class="ti ti-circle-check-filled"></i><div><div class="fw-semibold">Articles réglementaires complets</div><div class="text-muted small">Conformité juridique et fiscale</div></div></div>
              <div class="row-item"><i class="ti ti-circle-check-filled"></i><div><div class="fw-semibold">Clauses de contreparties</div><div class="text-muted small">Définition claire des engagements réciproques</div></div></div>
              <div class="row-item"><i class="ti ti-circle-check-filled"></i><div><div class="fw-semibold">Modalités de paiement</div><div class="text-muted small">Échéancier et conditions de versement</div></div></div>
              <div class="row-item"><i class="ti ti-circle-check-filled"></i><div><div class="fw-semibold">Obligations fiscales</div><div class="text-muted small">Références fiscales intégrées</div></div></div>
              <div class="row-item"><i class="ti ti-circle-check-filled"></i><div><div class="fw-semibold">Durée et résiliation</div><div class="text-muted small">Conditions de reconduction et de rupture</div></div></div>
            </div>
          </div>
        </div>

        <div class="resource-card modele-reviews">
          <div class="resource-card-body">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h3 class="h4 fw-bold mb-0">Avis utilisateurs</h3>
              <div class="text-warning small"><i class="ti ti-star-filled"></i><i class="ti ti-star-filled"></i><i class="ti ti-star-filled"></i><i class="ti ti-star-filled"></i><i class="ti ti-star-half-filled"></i> 4.8/5</div>
            </div>
            <div class="review">
              <div class="fw-semibold">Avis bientôt disponibles</div>
              <div class="text-muted">Aucun avis publié pour ce modèle pour le moment.</div>
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="resource-card mb-3">
          <div class="resource-card-body">
            <h3 class="h4 fw-bold mb-3">Informations</h3>
            <div class="d-grid gap-3">
              <div><div class="small text-muted"><i class="ti ti-calendar-event me-1"></i>Dernière mise à jour</div><div class="fw-semibold">{{ item.updated_at|date('d F Y') }}</div></div>
              <div><div class="small text-muted"><i class="ti ti-file me-1"></i>Format</div><div class="fw-semibold">{{ item.document_type ? item.document_type|upper : 'DOCX, PDF' }}</div></div>
              <div><div class="small text-muted"><i class="ti ti-language me-1"></i>Langue</div><div class="fw-semibold">Français</div></div>
              <div><div class="small text-muted"><i class="ti ti-copy me-1"></i>Pages</div><div class="fw-semibold">{{ item.attachments is defined and item.attachments|length > 0 ? item.attachments|length : 1 }} page(s)</div></div>
              <div><div class="small text-muted"><i class="ti ti-rosette-discount-check me-1"></i>Conformité</div><div class="fw-semibold text-success">{{ item.requires_legal_validation ? '2024 validée' : 'Standard' }}</div></div>
            </div>
            <hr>
            <h6 class="fw-bold mb-2">Catégories</h6>
            <div class="d-flex flex-wrap gap-2 mb-3">
              <span class="resource-chip resource-chip-model">{{ (item.document_type ?: 'modèle')|replace({'_':' '})|title }}</span>
              {% for sector in item.sectors|default([]) %}
                <span class="resource-chip resource-chip-guide">{{ sector|replace({'_':' '})|title }}</span>
              {% endfor %}
              <span class="resource-chip" style="background:#f1f5f9;color:#334155">{{ item.level ?: 'Débutant' }}</span>
            </div>

          </div>
        </div>

        <div class="resource-card">
          <div class="resource-card-body">
            <h3 class="h4 fw-bold mb-3">Modèles similaires</h3>
            <div class="d-grid gap-2">
              {% for similar in similarModeles|default([]) %}
                <a href="{{ path('dashboard_resources_modele_show', {code: similar.code}) }}" class="modele-mini-item text-decoration-none">
                  <span class="ic"><i class="ti ti-file-description"></i></span>
                  <div class="min-w-0">
                    <div class="fw-semibold text-dark text-truncate">{{ similar.title }}</div>
                    <div class="small text-muted">{{ similar.usages_count|default(0) }} utilisations</div>
                  </div>
                </a>
              {% else %}
                <div class="text-muted">Aucun modèle similaire disponible.</div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="useResourceModelModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border rounded-4">
      <form method="post" action="{{ path('dashboard_resources_modele_use', {code: item.code}) }}" data-controller="resource-center" data-turbo="false" data-action="submit->resource-center#useModel">
        {% if actions is defined %}
          {% for action in actions %}
            <div
              data-form-action="{{ action.type }}"
              {% if action.target is defined %}data-target="{{ action.target }}"{% endif %}
              {% if action.function is defined %}data-function="{{ action.function }}"{% endif %}
              {% if action.route is defined %}data-route="{{ action.route }}"{% endif %}
              {% if action.params is defined %}data-params="{{ action.params|json_encode }}"{% endif %}
            ></div>
          {% endfor %}
        {% endif %}
        <div class="modal-header">
          <h5 class="modal-title">Utiliser le modèle dans un projet</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="_token" value="{{ csrf_token('use_resource_modele_' ~ item.code) }}">
          <div class="mb-3">
            <label class="form-label fw-semibold">Titre du modèle dans le projet</label>
            <input type="text" class="form-control" name="titre" value="{{ item.title }}" required>
          </div>
          <div>
            <label class="form-label fw-semibold">Projet cible</label>
            <select class="form-select" name="projetId" required>
              <option value="">Sélectionner un projet</option>
              {% for projet in projets|default([]) %}
                <option value="{{ projet.idtoken }}">{{ projet.titre }}</option>
              {% else %}
                <option value="" disabled>Aucun projet disponible</option>
              {% endfor %}
            </select>
            <div class="form-text">Le contenu du modèle sera dupliqué dans l'entité `Modele` du projet sélectionné.</div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Annuler</button>
          <button type="submit" class="btn btn-success" data-resource-center-target="useModelSubmitBtn" {% if (projets|default([]))|length == 0 %}disabled{% endif %}>
            <span data-resource-center-target="useModelSubmitLabel">Créer dans le projet</span>
            <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true" data-resource-center-target="useModelSpinner"></span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}