{% extends "base.html" %}
{% block title %}Prévisualisation {{ template.path }} — Administration{% endblock %}
{% block content %}
<div class="container-fluid py-3">
  <div class="d-flex flex-column flex-lg-row justify-content-between gap-2 align-items-lg-center mb-3">
    <div>
      <h1 class="h4 mb-1"><i class="bi bi-eye"></i> Prévisualisation du template</h1>
      <code class="text-break">{{ template.path }}</code>
    </div>
    <a href="{{ url_for('admin.template_debug', filter='all') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left"></i> Retour à l’audit</a>
  </div>

  {% if render_error %}
  <div class="alert alert-warning">
    <strong><i class="bi bi-exclamation-triangle"></i> Rendu incomplet</strong>
    <p class="mb-0 small">Ce template attend probablement un contexte métier (objet, identifiant ou endpoint). Le fichier reste consultable ci-dessous.</p>
    <code class="d-block mt-2 text-break">{{ render_error }}</code>
  </div>
  {% endif %}

  <div class="row g-3">
    <div class="col-xl-8">
      <div class="card border-0 shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
          <strong><i class="bi bi-window"></i> Rendu visuel</strong>
          <span class="badge bg-info text-dark">sandboxé</span>
        </div>
        <div class="card-body p-0">
          {% if rendered is not none %}
          <iframe title="Rendu du template" sandbox="" srcdoc="{{ rendered|e }}" style="width:100%;height:70vh;border:0;background:#f8f9fa;"></iframe>
          {% else %}
          <div class="p-4 text-muted">Aucun rendu exploitable sans contexte métier.</div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="col-xl-4">
      <div class="card border-0 shadow-sm">
        <div class="card-header"><strong><i class="bi bi-code-slash"></i> Source</strong></div>
        <div class="card-body p-0"><pre class="m-0 p-3" style="max-height:70vh;overflow:auto;font-size:.78rem;white-space:pre-wrap;"><code>{{ source }}</code></pre></div>
      </div>
    </div>
  </div>
</div>
{% endblock %}