{% extends "base.html" %}
{% load common_extras %}
{% comment %}
Step zero of the import wizard: pick one of the templates this installation ships
instead of uploading a file.

Nothing is created here either. "Use this template" posts to flows:template_start,
which reads the file through the same parse_and_validate an upload uses and lands
on the same mapping page — see apps/flows/views_portability.py.

The search and category filter are Alpine over the already-rendered cards rather
than a second HTMX endpoint. There are around twenty of them, so a round trip per
keystroke buys nothing; it also sidesteps the $nextTick trap documented in
list.html, which exists only because htmx has to serialise a form first.
{% endcomment %}

{% block title %}Templates · DemandTrail Messaging{% endblock %}

{% comment %}
The Templates tab lands here, so the strip it was clicked in has to survive the
click — without this block the tab that was just selected, and Flows and
Sequences with it, vanish from the page they lead to.
{% endcomment %}
{% block sub_nav %}{% include "partials/_sub_nav.html" with groups=flow_tab_groups %}{% endblock %}

{% comment %}
The same header shape as Flows and Sequences — three tabs of one section should
not move the title about as you switch between them. "Cancel" is gone: the tab
strip above is the way back, and a page you arrived at by a tab has nothing to
cancel.
{% endcomment %}
{% block page_header %}
<div class="page-header max-w-[1060px]">
    <div class="page-header-text">
        <h1 class="page-title">Templates</h1>
        <p class="page-lede">
            Ready-made flows. Pick one and change the words to suit you — you will see exactly what it needs before anything is created.
        </p>
    </div>
    <div class="page-header-actions">
        <a href="{{ upload_url }}" class="btn-pill-secondary">
            {% include "partials/_nav_icon.html" with name="upload" icon_size=16 %} Upload a file
        </a>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="max-w-[1060px] w-full">
{% if errors %}
<div class="rounded-xl border p-4 mb-4" role="alert"
     style="border-color: var(--error-500); background: var(--error-50);">
    <p class="text-sm font-medium" style="color: var(--text-primary);">That template could not be read</p>
    <ul class="mt-2 space-y-1">
        {% for error in errors %}
        <li class="text-sm" style="color: var(--text-secondary);">{{ error }}</li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{% if cards %}
<div x-data="{
        q: '',
        filters: { category: [], channel: [] },
        matches(haystack, category, platforms) {
            if (this.filters.category.length && !this.filters.category.includes(category)) return false;
            if (this.filters.channel.length && !platforms.split(' ').some(p => this.filters.channel.includes(p))) return false;
            if (!this.q) return true;
            return haystack.toLowerCase().includes(this.q.toLowerCase());
        }
     }">

    {% comment %}
      The same search + Filter shape as every other list (HANDOFF §2.2), applied
      in the browser: the popover's model is read by matches() on each card,
      so there is no form and no reload — its hidden inputs are inert here.
    {% endcomment %}
    <div class="mb-5">
    <div class="list-toolbar">
        <label class="search-field w-full sm:w-64">
            {% include "partials/_nav_icon.html" with name="search" icon_size=16 %}
            <input type="search" x-model="q" placeholder="Search {{ cards|length }} templates"
                   class="search-input" aria-label="Search templates">
        </label>
        {% filter_popover groups=filter_groups noun="template" %}
    </div>
    {% filter_chips groups=filter_groups %}
    </div>

    <div class="tpl-grid">
        {% for entry in cards %}
        {% include "flows/_template_card.html" with searchable=True %}
        {% endfor %}
    </div>

    <div class="rounded-lg p-3 mt-6" style="background: var(--surface-2);">
        <p class="text-xs" style="color: var(--text-secondary);">
            Every template arrives as an <strong>unpublished draft</strong> with its triggers switched off,
            and its links and tags are placeholders. Nothing runs until you edit it and publish it yourself.
        </p>
    </div>
</div>
{% else %}
<div class="rounded-xl border p-6 text-center" style="border-color: var(--border); background: var(--surface-1);">
    <p class="text-sm font-medium" style="color: var(--text-primary);">No templates are installed</p>
    <p class="text-sm mt-1" style="color: var(--text-secondary);">
        This installation ships none, or none of them could be read.
        You can still <a href="{{ upload_url }}" class="btn-link">upload a template file</a>.
    </p>
</div>
{% endif %}
</div>
{% endblock %}