Maybe/app/views/rule/conditions/_condition.html.erb

<%# locals: (form:, show_prefix: true) %>

<% condition = form.object %>
<% rule = condition.rule %>

<li data-controller="rule--conditions" data-rule--conditions-condition-filters-value="<%= rule.condition_filters.to_json %>" class="flex items-center gap-3">

  <%# Conditionally render the prefix %>
  <%# Condition groups pass in show_prefix: false for subconditions since the ANY/ALL selector makes that clear %>
  <% if show_prefix %>
    <div class="pl-2" data-condition-prefix>
      <span class="font-medium uppercase text-xs">and</span>
    </div>
  <% end %>

  <div class="grow flex gap-2 items-center h-full">
    <%= form.hidden_field :_destroy, value: false, data: { rule__conditions_target: "destroyField" } %>

    <div class="w-2/5 shrink-0">
      <%= form.select :condition_type, rule.condition_filters.map { |filter| [ filter.label, filter.key ] }, {}, data: { action: "rule--conditions#handleConditionTypeChange" } %>
    </div>

    <%= form.select :operator, condition.operators, { container_class: "w-fit min-w-36" }, data: { rule__conditions_target: "operatorSelect" } %>

    <div data-rule--conditions-target="filterValue" class="grow">
      <% if condition.filter.type == "select" %>
        <%= form.select :value, condition.options, {} %>
      <% else %>
        <% if condition.filter.type == "number" %>
          <%= form.number_field :value, placeholder: "10", step: 0.01 %>
        <% else %>
          <%= form.text_field :value, placeholder: "Enter a value" %>
        <% end %>
      <% end %>
    </div>
  </div>

  <%= icon(
    "trash-2",
    as_button: true,
    size: "sm",
    data: { action: "rule--conditions#remove", rule__conditions_destroy_param: condition.persisted? }
  ) %>
</li>