{% extends "layouts/workspace_settings.html" %}
{% load static %}
{% block title %}Inbox rules · DemandTrail Messaging{% endblock %}
{% block content_wrap %}{% endblock %}

{% comment %}
`editorOpen` hides the header's primary while the editor is on screen: the
editor carries its own "Save rule" primary, and two orange buttons on one page
is two calls to action. It flips on the htmx swap that fills #inbox-rule-editor,
which is the only signal there is — that partial arrives long after Alpine booted.

**And it has to flip back, which is the whole reason the second handler exists.**
inbox:rule_save answers with toast_response — a 204 — so htmx swaps nothing and
the saved form just sits there. A flag set on open and never reset left the
header button hidden for the rest of the session, with no way to start a second
rule short of reloading.

Two guards on that handler, both load-bearing. `bbChanged` rather than
`detail.successful`, because a *refused* save is also a 204 and closing the
editor on one would throw away the correction the operator is part-way through —
only the success path sets inboxRulesChanged. And `$refs.editor.contains(...)`,
because this listener sees every htmx request in the page: without it, deleting
some other rule from its row menu would wipe the editor somebody is typing in.
{% endcomment %}
{% block content %}
<div class="max-w-[1060px] w-full" x-data="{ editorOpen: false }" @htmx:after-swap.window="if ($event.detail.target.id === 'inbox-rule-editor') editorOpen = true" @htmx:after-request="if (bbChanged($event, 'inboxRulesChanged') && $refs.editor.contains($event.detail.elt)) { $refs.editor.innerHTML = ''; editorOpen = false }">
  <div class="page-header">
    <div class="page-header-text">
      <h1 class="page-title">Inbox rules</h1>
      <p class="page-lede">
        A rule reads every message that arrives and files, assigns or closes the conversation it
        belongs to. It runs before any flow replies, and it keeps running even where somebody has
        paused automation on a thread.
      </p>
    </div>
    <button type="button" class="btn-pill-primary flex-shrink-0" x-show="!editorOpen" hx-get="{% url 'inbox:rule_form' workspace_id=request.workspace.id %}" hx-target="#inbox-rule-editor">{% include "partials/_nav_icon.html" with name="sliders" icon_size=16 %} New rule</button>
  </div>

  <div class="alert-info mb-5">
    Triggers stop at the first match. Rules do not: <strong>every</strong> rule that matches
    applies, in the order below.
  </div>

  {% include "inbox/_rule_rows.html" %}

  <div id="inbox-rule-editor" x-ref="editor" class="mt-5"></div>
</div>
{% endblock %}

{% block extra_head %}
  {{ block.super }}
  {% comment %} The condition builder's date rules use flatpickr, as the contact list's do. {% endcomment %}
  <link rel="stylesheet" href="{% static 'js/vendor/flatpickr.min.css' %}" />
{% endblock %}

{% block alpine_components %}
  {{ block.super }}
  {% comment %}
    The §11.4 builder's component, defined here rather than in the editor
    partial: x-data can only call a factory that already exists, and the partial
    arrives by htmx swap long after Alpine booted. Same placement contacts/list.html
    uses, for the same reason.
  {% endcomment %}
  {% include "contacts/_filter_bar_script.html" %}
  {% include "partials/_list_behaviours.html" %}
  <script src="{% static 'js/vendor/flatpickr.min.js' %}"></script>
  <script src="{% static 'js/vendor/sortable.min.js' %}"></script>
  <script nonce="{{ request.csp_nonce }}">
    // Drag-to-reorder, with the up/down buttons doing exactly the same thing.
    //
    // Delegated from the document rather than bound to the list, because
    // #inbox-rule-rows re-fetches itself on every change: a listener attached to
    // the <ol> would be thrown away with the markup it was attached to, and
    // rebinding after each swap is a second place to forget.
    //
    // The form's hidden `rule` inputs *are* the order — moving the <li> moves
    // its input with it — so submitting posts whatever the DOM currently shows,
    // and the server renumbers to 0, 10, 20… from that list alone.
    (function () {
      var live = null;

      function attach() {
        var list = document.querySelector('[data-rule-list]');
        if (!list || list === live) return;
        live = list;
        Sortable.create(list, {
          handle: '[data-rule-handle]',
          animation: 120,
          onEnd: function () { submitOrder(list); },
        });
      }

      function submitOrder(list) {
        var form = list.closest('form');
        if (form) htmx.trigger(form, 'rule-order-changed');
      }

      document.addEventListener('click', function (event) {
        var button = event.target.closest('[data-rule-move]');
        if (!button) return;
        var row = button.closest('[data-rule-id]');
        var sibling = button.getAttribute('data-rule-move') === 'up'
          ? row.previousElementSibling
          : row.nextElementSibling;
        if (!sibling) return;
        if (button.getAttribute('data-rule-move') === 'up') {
          row.parentNode.insertBefore(row, sibling);
        } else {
          row.parentNode.insertBefore(sibling, row);
        }
        // Keyboard focus follows the row, or the operator loses their place on
        // every press and has to hunt for the button they just used.
        button.focus();
        submitOrder(row.closest('[data-rule-list]'));
      });

      document.addEventListener('DOMContentLoaded', attach);
      document.body.addEventListener('htmx:afterSwap', attach);
    })();
  </script>
{% endblock %}