{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
Template gallery — the catalogue a customer browses before starting a project.

Category sidebar on >=lg, a scrolling pill rail below that, live search, and a
card grid that collapses to one column at 375px.  Cards carry a hover overlay
with "Preview" and "Use this template"; on touch devices (no hover) the overlay
is laid out inline instead, so the actions are never unreachable.
{% endcomment %}

{% block title %}Website builder{% endblock %}

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

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

  {{ initialCategory|json_script:"cpBuilderInitialCategory" }}
  {{ availability|json_script:"cpBuilderAvailability" }}
  {{ canBuild|json_script:"cpBuilderCanBuild" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">AI website builder</h1>
      <p class="cpb-muted mb-0 small">
        Pick a template, describe your business, and the builder writes the copy
        and publishes a complete site to your domain.
      </p>
    </div>
    <div class="d-flex gap-2">
      <a href="/builder/projects" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-folder-open me-1"></i>My projects
      </a>
      {% if canBuild == 1 %}
        <a href="/builder/new" class="btn btn-primary btn-sm">
          <i class="fas fa-wand-magic-sparkles me-1"></i>Start a new site
        </a>
      {% endif %}
    </div>
  </div>

  {% include "siteBuilder/_availability.html" %}

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>

  <div class="row g-4">

    {# ---------------------------------------------------------------- #}
    {# Category sidebar (large screens)                                   #}
    {# ---------------------------------------------------------------- #}
    <div class="col-lg-3 d-none d-lg-block">
      <div class="cpb-sidebar" role="navigation" aria-label="Template categories">
        <div class="cpb-section-title">Categories</div>
        <button type="button" class="cpb-cat" ng-class="{'is-active': category === 'all'}"
                ng-click="pick('all')">
          <i class="fa-solid fa-border-all" aria-hidden="true"></i>
          <span>All templates</span>
          <span class="cpb-cat__count" ng-bind="total"></span>
        </button>
        <button type="button" class="cpb-cat" ng-repeat="cat in categories"
                ng-class="{'is-active': category === cat.slug}"
                ng-click="pick(cat.slug)" ng-cloak>
          <i class="{$ cat.icon $}" aria-hidden="true"></i>
          <span ng-bind="cat.name"></span>
          <span class="cpb-cat__count" ng-bind="cat.count"></span>
        </button>
      </div>
    </div>

    {# ---------------------------------------------------------------- #}
    {# Grid                                                               #}
    {# ---------------------------------------------------------------- #}
    <div class="col-lg-9">

      <div class="mb-3">
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
          <input type="search" class="form-control"
                 placeholder="Search templates — “restaurant”, “portfolio”, “dark”…"
                 ng-model="search" ng-change="load()"
                 ng-model-options="{debounce: 250}"
                 aria-label="Search templates">
          <button type="button" class="btn btn-outline-secondary" ng-show="search"
                  ng-click="clearSearch()" aria-label="Clear search" ng-cloak>
            <i class="fas fa-xmark"></i>
          </button>
        </div>
      </div>

      {# Pill rail replaces the sidebar below lg. #}
      <div class="cpb-catrail d-lg-none mb-3" role="navigation" aria-label="Template categories">
        <button type="button" class="cpb-cat" ng-class="{'is-active': category === 'all'}"
                ng-click="pick('all')">All</button>
        <button type="button" class="cpb-cat" ng-repeat="cat in categories"
                ng-class="{'is-active': category === cat.slug}"
                ng-click="pick(cat.slug)" ng-cloak>
          <span ng-bind="cat.name"></span>
          <span class="cpb-cat__count" ng-bind="cat.count"></span>
        </button>
      </div>

      <div class="d-flex align-items-center justify-content-between mb-2" ng-cloak>
        <div class="small cpb-muted">
          <span ng-bind="templates.length"></span> template(s)
          <span ng-show="category !== 'all'">in this category</span>
          <span ng-show="search">matching “<span ng-bind="search"></span>”</span>
        </div>
        <div class="small cpb-muted" ng-show="busy">
          <i class="fas fa-circle-notch fa-spin me-1"></i>Loading…
        </div>
      </div>

      <div class="cpb-grid">
        <div class="cpb-card" ng-repeat="tpl in templates track by tpl.slug" ng-cloak>

          <div class="cpb-card__shot" ng-class="{'is-empty': !tpl.thumbnail}">
            <div class="cpb-card__shot-placeholder" aria-hidden="true">
              <i class="fa-regular fa-image"></i>
            </div>
            <img class="cpb-card__shot-img" ng-if="tpl.thumbnail"
                 ng-src="{$ tpl.thumbnail $}" alt="" loading="lazy">

            <div class="cpb-card__overlay">
              <a class="btn btn-light btn-sm w-100" ng-href="{$ previewURL(tpl) $}">
                <i class="fas fa-eye me-1"></i>Preview
              </a>
              {% if canBuild == 1 %}
                <a class="btn btn-primary btn-sm w-100" ng-href="{$ useURL(tpl) $}">
                  <i class="fas fa-wand-magic-sparkles me-1"></i>Use this template
                </a>
              {% endif %}
            </div>
          </div>

          <div class="cpb-card__body">
            <div class="d-flex align-items-start justify-content-between gap-2">
              <div class="cpb-card__name" ng-bind="tpl.name"></div>
              <span class="badge rounded-pill text-bg-secondary flex-shrink-0"
                    ng-bind="tpl.categoryName"></span>
            </div>
            <div class="cpb-card__desc" ng-bind="tpl.description"></div>

            <div class="d-flex align-items-center justify-content-between gap-2">
              <div class="cpb-swatches" aria-hidden="true">
                <span class="cpb-swatch" ng-repeat="c in swatches(tpl) track by $index"
                      ng-style="{'background-color': c}"></span>
              </div>
              <div class="small cpb-muted">
                <span ng-bind="tpl.sectionCount"></span> sections
              </div>
            </div>

            <div class="cpb-tags">
              <span class="cpb-tag" ng-repeat="tag in tpl.tags | limitTo:4 track by $index"
                    ng-bind="tag"></span>
              <span class="cpb-tag" ng-if="tpl.isPremium">
                <i class="fas fa-star me-1"></i>Premium
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="text-center cpb-muted py-5" ng-show="!busy && templates.length === 0" ng-cloak>
        <div class="fs-2 mb-2"><i class="fa-regular fa-folder-open"></i></div>
        <p class="mb-1">No templates matched.</p>
        <p class="small mb-0">Try a different category, or clear the search box.</p>
      </div>

    </div>
  </div>
</div>
{% endblock %}

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