{% comment %}
The ordered steps, each with the number of people currently waiting on it.

"Waiting" is where an active enrollment's `current_step` points — the rung it
will run next — which is the count an operator means by "how many people are
about to get step 3".

The delay/window controls are a plain form per step rather than one big form:
each step saves independently, so a validation refusal on one cannot discard
edits to another.
{% endcomment %}
<section>
    <h2 class="section-eyebrow mb-2.5">Steps</h2>

    {% if not steps %}
    <div class="mb-4">
    {% include "components/empty_state.html" with icon="sequences" title="No steps yet" body="A sequence with no steps completes the moment somebody subscribes to it." %}
    </div>
    {% else %}
    <div class="card overflow-hidden mb-4">
        {% for step in steps %}
        <div class="card-row p-4" x-data="{ editing: false }">
            <div class="flex flex-wrap items-center gap-3">
                <span class="inline-flex items-center justify-center rounded-full text-xs font-semibold"
                      style="width: 1.75rem; height: 1.75rem; background: var(--ink); color: var(--text-inverse);">{{ step.position }}</span>
                <div class="flex-1 min-w-0">
                    <p class="list-row-title truncate">{{ step.flow.name }}</p>
                    <p class="text-xs mt-0.5" style="color: var(--text-tertiary);">
                        Wait {{ step.delay_label }}{% if step.window.enabled %},
                        {{ step.window.from }}–{{ step.window.to }}{% if step.window.use_contact_timezone %} in the contact's timezone{% endif %}{% endif %}
                        · {{ step.waiting_count }} waiting
                    </p>
                </div>
                {% if can_edit %}
                <div class="flex items-center gap-2">
                    <button type="button" class="btn-pill-secondary btn-pill-sm" @click="editing = !editing" :aria-expanded="editing ? 'true' : 'false'">Edit</button>
                    <button type="button" class="btn-icon-round"
                            hx-post="{% url 'campaigns:step_move' workspace_id=request.workspace.id sequence_id=sequence.id step_id=step.id %}"
                            hx-vals='{"direction": "up"}' hx-swap="none" aria-label="Move step up">↑</button>
                    <button type="button" class="btn-icon-round"
                            hx-post="{% url 'campaigns:step_move' workspace_id=request.workspace.id sequence_id=sequence.id step_id=step.id %}"
                            hx-vals='{"direction": "down"}' hx-swap="none" aria-label="Move step down">↓</button>
                    <button type="button" class="btn-danger-link ml-1"
                            hx-post="{% url 'campaigns:step_delete' workspace_id=request.workspace.id sequence_id=sequence.id step_id=step.id %}"
                            hx-swap="none"
                            hx-confirm="Remove step {{ step.position }}? Anyone waiting on it moves to whatever takes its place.">Remove</button>
                </div>
                {% endif %}
            </div>

            {% if can_edit %}
            <form x-show="editing" x-cloak class="mt-3"
                  hx-post="{% url 'campaigns:step_update' workspace_id=request.workspace.id sequence_id=sequence.id step_id=step.id %}"
                  hx-swap="none"
                  @htmx:after-request="editing = false">
                {% csrf_token %}
                {% include "campaigns/_step_fields.html" with step=step %}
                <div class="flex items-center gap-2 mt-3">
                    <button type="submit" class="btn-pill-secondary btn-pill-sm">Save step</button>
                    <button type="button" class="btn-link" @click="editing = false">Cancel</button>
                </div>
            </form>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {% if can_edit %}
    <div class="card p-4" x-data="{ adding: false }">
        <button type="button" class="btn-pill-secondary btn-pill-sm" x-show="!adding" @click="adding = true">
            {% include "partials/_nav_icon.html" with name="plus" icon_size=15 %} Add a step
        </button>
        <form x-show="adding" x-cloak
              hx-post="{% url 'campaigns:step_create' workspace_id=request.workspace.id sequence_id=sequence.id %}"
              hx-swap="none"
              @htmx:after-request="adding = false">
            {% csrf_token %}
            {% include "campaigns/_step_fields.html" %}
            <div class="flex items-center gap-2 mt-3">
                <button type="submit" class="btn-pill-secondary btn-pill-sm">Add step</button>
                <button type="button" class="btn-link" @click="adding = false">Cancel</button>
            </div>
        </form>
    </div>
    {% endif %}
</section>