{% extends "base.html" %}
{% load common_extras %}
{% comment %}
The sequence list. Everything below the toolbar is _list_rows.html, so the table
has exactly one renderer: the filters fetch it, and every mutation answers with a
`sequencesChanged` event that makes it re-fetch itself.

Colours come from theme tokens rather than utility palettes, and no Tailwind
utility here sets a property a design-system class already owns — ground rule 9
in docs/agent-prompts/layer-2.md.
{% endcomment %}

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

{% comment %}
Sequences is the middle tab of the automations strip, so it carries the strip
too — without it the Flows and Templates tabs vanished the moment this one was
clicked. The header has the Flows page's shape for the same reason: three tabs
of one section should not move the title about as you switch between them.
{% endcomment %}
{% block sub_nav %}{% include "partials/_sub_nav.html" with groups=flow_tab_groups %}{% endblock %}
{% block alpine_components %}{{ block.super }}{% include "partials/_list_behaviours.html" %}{% endblock %}

{% block content %}
<div class="max-w-[1060px] w-full"
     x-data="{
        q: '{{ query|escapejs }}',
        filters: {{ filters|json_attr }},
        reload() { this.$nextTick(() => this.$refs.filters.dispatchEvent(new Event('filters-changed'))); },
        clearFilters() { this.q = ''; Object.keys(this.filters).forEach(k => this.filters[k] = []); this.reload(); }
     }">
    <div class="page-header">
        <div class="page-header-text">
            <h1 class="page-title">Sequences</h1>
            <p class="page-lede">
                A series of messages sent over days. Each step waits for the time you set, counting from the message before it, then runs a flow.
            </p>
        </div>
        {% if can_edit %}
        <div class="page-header-actions">
            <button type="button" class="btn-pill-primary" @click="$modal('new-sequence')">
                {% include "partials/_nav_icon.html" with name="plus" icon_size=16 %} New sequence
            </button>
        </div>
        {% endif %}
    </div>

    {% if can_edit %}
    {% modal "new-sequence" title="New sequence" close_on="sequencesChanged" %}
    <form hx-post="{% url 'campaigns:create' workspace_id=request.workspace.id %}" hx-swap="none">
        <div class="bb-modal-body">
            <div class="field">
                <label class="field-label" for="new-sequence-name">What is this sequence called?</label>
                <input class="form-input-styled" id="new-sequence-name" type="text" name="name" maxlength="200" required autofocus placeholder="New subscriber welcome">
            </div>
        </div>
        <div class="bb-modal-actions">
            <button type="button" class="btn-pill-secondary" @click="close()">Cancel</button>
            <button type="submit" class="btn-pill-primary">Create sequence</button>
        </div>
    </form>
    {% endmodal %}
    {% endif %}

    <div class="mb-5">
    <form id="sequence-filters" x-ref="filters"
          class="list-toolbar"
          hx-get="{% url 'campaigns:list' workspace_id=request.workspace.id %}"
          hx-target="#sequence-rows"
          hx-swap="innerHTML"
          hx-trigger="input changed delay:300ms from:#sequence-search, filters-changed"
          @submit.prevent>
        <label class="search-field w-full sm:w-64">
            {% include "partials/_nav_icon.html" with name="search" icon_size=16 %}
            <input type="search" id="sequence-search" name="q" x-model="q" placeholder="Search sequences"
                   class="search-input" aria-label="Search sequences">
        </label>
        {% filter_popover groups=filter_groups onchange="reload()" target="#sequence-rows" count=sequences|length noun="sequence" %}
    </form>
    {% filter_chips groups=filter_groups onchange="reload()" %}
    </div>

    <div id="sequence-rows"
         hx-get="{% url 'campaigns:list' workspace_id=request.workspace.id %}"
         hx-trigger="sequencesChanged from:body"
         hx-target="this"
         hx-swap="innerHTML"
         hx-include="#sequence-filters">
        {% include "campaigns/_list_rows.html" %}
    </div>
</div>
{% endblock %}