{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
Full-page preview of a single template.

When the catalogue row carries a previewURL the live page is shown in a
sandboxed iframe — `sandbox` withholds same-origin and top-navigation, and the
URL itself was already restricted to http(s) by views._safe_external_url, so a
hand-edited catalogue row cannot turn this page into an open redirect or reach
back into the panel session.  When there is no preview URL we show the template
sheet instead: sections, palette and type pairing.
{% endcomment %}

{% block title %}{{ tpl.name }} · Template preview{% endblock %}

{% block styles %}
  <link rel="stylesheet" href="{% static 'siteBuilder/siteBuilder.css' %}">
{% endblock %}

{% block content %}
<div ng-controller="builderPreviewController">

  {{ templateJSON|json_script:"cpBuilderTemplate" }}
  {{ canBuild|json_script:"cpBuilderCanBuild" }}

  <nav aria-label="Breadcrumb" class="mb-3">
    <ol class="breadcrumb small mb-0">
      <li class="breadcrumb-item"><a href="/builder/">Website builder</a></li>
      <li class="breadcrumb-item">
        <a href="/builder/templates?category={{ tpl.categorySlug }}">{{ tpl.categoryName }}</a>
      </li>
      <li class="breadcrumb-item active" aria-current="page">{{ tpl.name }}</li>
    </ol>
  </nav>

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">
        {{ tpl.name }}
        {% if tpl.isPremium %}
          <span class="badge rounded-pill text-bg-warning align-middle">
            <i class="fas fa-star me-1"></i>Premium
          </span>
        {% endif %}
      </h1>
      <p class="cpb-muted mb-0 small">{{ tpl.description }}</p>
    </div>
    <div class="d-flex gap-2">
      <div class="btn-group btn-group-sm" role="group" aria-label="Preview width">
        <button type="button" class="btn btn-outline-secondary"
                ng-class="{active: device === 'mobile'}" ng-click="setDevice('mobile')"
                title="Phone width"><i class="fas fa-mobile-screen"></i></button>
        <button type="button" class="btn btn-outline-secondary"
                ng-class="{active: device === 'tablet'}" ng-click="setDevice('tablet')"
                title="Tablet width"><i class="fas fa-tablet-screen-button"></i></button>
        <button type="button" class="btn btn-outline-secondary"
                ng-class="{active: device === 'desktop'}" ng-click="setDevice('desktop')"
                title="Full width"><i class="fas fa-desktop"></i></button>
      </div>
      {% if canBuild == 1 %}
        <a class="btn btn-primary btn-sm" href="/builder/new?template={{ tpl.slug|urlencode }}">
          <i class="fas fa-wand-magic-sparkles me-1"></i>Use this template
        </a>
      {% endif %}
    </div>
  </div>

  {% if tpl.previewURL %}
    <div class="cpb-frame-wrap mb-4"
         ng-class="{'is-mobile': device === 'mobile', 'is-tablet': device === 'tablet'}">
      <iframe class="cpb-frame"
              src="{{ tpl.previewURL }}"
              title="Live preview of the {{ tpl.name }} template"
              loading="lazy"
              referrerpolicy="no-referrer"
              sandbox="allow-scripts allow-popups"></iframe>
    </div>
    <p class="small cpb-muted mb-4">
      This preview is loaded from
      <span class="cpb-mono">{{ tpl.previewURL }}</span> in an isolated frame.
    </p>
  {% else %}
    <div class="alert alert-info py-2 px-3 small" role="status">
      <i class="fas fa-circle-info me-1"></i>
      This template has no hosted preview. The layout it will produce is
      summarised below — the real page is generated from your own business
      description.
    </div>
  {% endif %}

  <div class="row g-4">
    <div class="col-lg-7">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Page layout</h2>
          {% if tpl.sections %}
            <ol class="list-group list-group-numbered">
              {% for section in tpl.sections %}
                <li class="list-group-item bg-transparent">{{ section }}</li>
              {% endfor %}
            </ol>
          {% else %}
            <p class="cpb-muted small mb-0">
              This template does not declare its sections; the generator will
              choose a structure that fits your description.
            </p>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Design</h2>

          <div class="cpb-section-title">Palette</div>
          {% if tpl.colorList %}
            <div class="d-flex flex-wrap gap-2 mb-3">
              {% for swatch in tpl.colorList %}
                <div class="text-center">
                  <span class="cpb-swatch d-block mx-auto"
                        style="width:2rem;height:2rem;background-color: {{ swatch.value }};"
                        title="{{ swatch.name }}: {{ swatch.value }}"></span>
                  <div class="small cpb-muted mt-1">{{ swatch.name }}</div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <p class="cpb-muted small">Uses your chosen primary colour.</p>
          {% endif %}

          <div class="cpb-section-title">Typography</div>
          {% if tpl.fontList %}
            <ul class="list-unstyled small mb-3">
              {% for font in tpl.fontList %}
                <li><span class="cpb-muted">{{ font.name }}:</span> {{ font.value }}</li>
              {% endfor %}
            </ul>
          {% else %}
            <p class="cpb-muted small mb-3">System font stack.</p>
          {% endif %}

          {% if tpl.tags %}
            <div class="cpb-section-title">Tags</div>
            <div class="cpb-tags">
              {% for tag in tpl.tags %}<span class="cpb-tag">{{ tag }}</span>{% endfor %}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="text-center mt-4">
    <a href="/builder/templates?category={{ tpl.categorySlug }}"
       class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-arrow-left me-1"></i>Back to {{ tpl.categoryName }}
    </a>
  </div>
</div>
{% endblock %}

{% block scripts %}
  <script src="{% static 'siteBuilder/siteBuilder.js' %}"></script>
{% endblock %}